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.

please try to add a complete code example, preferably something we can run. [minimal-reproducible-example](https://stackoverflow.com/help/minimal-reproducible-example)? — Peter, Aug 05 '19 at 13:56

Harsh kurra · Accepted Answer · 2019-08-05T17:58:28.853

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>
  );
};

In this.startCreateEventHandler(archive)}> where are you getting event? — Aktzin, Aug 05 '19 at 14:14
Just reading the code it looks like logically it would do what I need it to do; but I get a "TypeError: this.state.selectedArchive.map is not a function" error when clicking the row. — Aktzin, Aug 05 '19 at 14:20
I'm a bit offended by your comment; but I got it to work never the less, so thanks. — Aktzin, Aug 05 '19 at 19:49

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

1 Answers1

Linked