如何在按钮单击时打开子表并做出反应？

Question

我是新来的本地人，对此我有点麻烦。 我有一张桌子，每一行都有一个昵称和一个按钮。每当我单击这些按钮之一时，该行下方将显示一个新表格，并带有该昵称的人的信息。我需要对列表中的每一行执行此操作，而无需重复代码。 这就是我所拥有的：

这是我需要的：

这是我现在拥有的代码：

class Sessions extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isActive: false
    };

    this.handleShow = () => {
      this.setState({ isActive: true });
    };

    this.handleHide = () => {
      this.setState({ isActive: false });
    };


  }

 render() {

    return (
      <div className="animated fadeIn">
        <Row>
          <Card>
            <CardBody>
              <Table hover responsive className="table-outline mb-0 d-none d-sm-table">
                <thead className="thead-light">
                  <tr>
                    <th width="1000">Nickame</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <p>Guille Piola 23</p>
                    </td>
                    <td>
                      <div>
                        {this.state.isActive ? (
                          <Button color="primary" className="select" onClick={this.handleHide}>Sesiones</Button>
                        ) : (
                            <Button color="primary" className="select" onClick={this.handleShow}>Sesiones</Button>
                          )}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p>Guille Cumbiero</p>
                    </td>
                    <td>
                      <div>
                        {this.state.isActive ? (
                          <Button color="primary" className="select" onClick={this.handleHide}>Sesiones</Button>
                        ) : (
                            <Button color="primary" className="select" onClick={this.handleShow}>Sesiones</Button>
                          )}
                      </div>
                    </td>
                  </tr>
                </tbody>
              </Table>
            </CardBody>
          </Card>
          {this.state.isActive &&
            <Card>
              <CardBody>
                <Table hover responsive className="table-outline mb-0 d-none d-sm-table" >
                  <thead className="thead-light">
                    <tr>
                      <th scope="col">id</th>
                      <th scope="col">Nickname</th>
                      <th scope="col">Contexto Social</th>
                      <th scope="col">¿Tiene Padre?</th>
                      <th scope="col">¿Tiene Madre?</th>
                      <th scope="col">Genero</th>
                      <th scope="col">Cantidad de Hermanos</th>
                      <th scope="col">Año escolar</th>
                      <th scope="col">Cantidad de Abuelos</th>
                      <th scope="col">Accion</th>
                    </tr>
                  </thead>
                  <tbody>
                  </tbody>
                </Table>
              </CardBody>
            </Card>
          }
        </Row >

      </div >
    );
  }
}

有关如何执行此操作的任何建议？ 谢谢！