How can I display a clickable table from a nested array of objects?

Question

I have an array of objects that contain some variable information, but also another array of objects with some more information. I'm trying to display a table that shows the initial array, and when the user clicks on the row of that particular object, it would render a new table with the objects inside that specific array selected.

startCreateEventHandler = () => {
  this.setState({ creating: true });
};

modalCancelHandler = () => {
  this.setState({ creating: false });
};

render() {
  return (
    <div>
      {this.state.creating && (
        <Table>
          <thead>
            <tr>
              <th>Details</th>
            </tr>
          </thead>
          <tbody>
            {this.props.archives.map(archive =>
              archive.ticketRequests.map(request => (
                <tr>
                  <td>{request.details}</td>
                </tr>
              ))
            )}
          </tbody>
        </Table>
      )}

      {this.state.creating ? null : (
        <Table hover className="table table-striped">
          <thead>
            <tr>
              <th>Title</th>
            </tr>
          </thead>
          <tbody>
            {this.props.archives.map(archive => (
              <tr onClick={this.startCreateEventHandler}>
                <td>{archive.title}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      )}
    </div>
  );
}

What I get with this is the table set up correctly, but once I click on a row it displays all* rows objects in the next table instead of just that specific archive.

Answer 1

If I understood your problem then You also need to set the current clicked archive on the state and need to parse that selected archive

startCreateEventHandler = (archive) => {
  this.setState({ creating: true, selectedArchive: archive });
};

modalCancelHandler = () => {
  this.setState({ creating: false, selectedArchive: undefined });
};

render() {
  return (
    <div>
      {this.state.creating && (
        <Table>
          <thead>
            <tr>
              <th>Details</th>
            </tr>
          </thead>
          <tbody>
            {this.state.selectedArchive.map(archive =>
              <tr>
                  <td>{archive.details}</td>
              </tr>
            )}
          </tbody>
        </Table>
      )}

      {this.state.creating ? null : (
        <Table hover className="table table-striped">
          <thead>
            <tr>
              <th>Title</th>
            </tr>
          </thead>
          <tbody>
            {this.props.archives.map(archive => (
              <tr onClick={(event)=>this.startCreateEventHandler(archive.ticketRequests)}>
                <td>{archive.title}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      )}
    </div>
  );
};