单击按钮后在弹出表单上显示列表

Question

我是本机反应的新手，需要帮助。我想这样做：我有一个按钮，单击它时，列表项将显示在弹出窗口上。帮帮我！

谢谢

这是我的代码：

import React, { Component } from 'react';
import HeaderApp from '../../components/HeaderApp/HeaderApp';
import { Link } from 'react-router-dom'
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button, Modal,ListGroup,Popover
} from 'reactstrap';
import UaaService from '../../services/UaaService';

class AddPermissions extends Component {

constructor(props) {
    super(props);
    this.state = {
        groups: [{
            name: '',
            permission: [{
                name: ''
            }]
        }],
        groupName: ''
    }

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.uaaService = new UaaService();
}

countPermissionPerGroup = (group) => {
    let x = 0;
    for (var g in group.permission) {
        x++;
    }
    return x;
}

onClickShowPermissions = (group) => {
    group.permission.map((permission) => {
        console.log(permission.name)

    })


}

handleChange(event) {
    this.setState({ groupName: event.target.value });
}

handleSubmit(event) {
    alert('A name was submitted: ' + this.state.groupName);
    let params = {
        groupName: this.state.groupName
    }
    this.uaaService.fetchGroupByName(params, this.updateGroups);

    event.preventDefault();
}

render() {

    return (
        <div>
            <div>
                <HeaderApp />

                <h3>Choose a group to add permissions:</h3>

                <div>
                    <h6></h6>
                    <form onSubmit={this.handleSubmit}>
                        <label>
                            Filter by name:
                             <input type="text" value={this.state.value} onChange={this.handleChange} />
                        </label>
                        <input type="submit" value="Submit" />
                    </form>
                </div>
                <p> </p>

                {this.state.groups.map((groups) => {
                    return (<li key={groups.code}>
                        <Card>
                            <CardBody>
                                <CardTitle>{groups.name}</CardTitle>
                                <CardSubtitle>This group has {this.countPermissionPerGroup(groups)} permissions.</CardSubtitle>
                                <Button color="secondary" onClick={() => this.onClickShowPermissions(groups)}>Show permissions</Button>
                                <Button color="secondary">Add Permission</Button>
                            </CardBody>
                        </Card>
                    </li>)
                })}
            </div>
        </div>
    );
}

componentDidMount() {
    this.uaaService.fetchGroupsAndPermissions(this.updateGroups);

}

// Update group and re-render.
updateGroups = (input) => {
    this.setState({ groups: input });
}

}

导出默认的AddPermissions;

我想在onClick方法上构造一个包含所有权限名称的表，并在弹出窗口中显示相同的列表，我已经搜索了但没有发现任何重要的东西。