0

I am using react-modal and react-bootstrap-table2 to display row's values in a modal.

Right now the modal displays the last rows values regardless of row clicked. How do I make sure the each modal displays its own rows data?

renderButtons = (cell, row, rowIndex) => {
return (
  <span>
    <button onClick={this.openModal}>Details</button>
    <Modal
      isOpen={this.state.modalIsOpen}
      onAfterOpen={this.afterOpenModal}
      onRequestClose={this.closeModal}
      style={customStyles}
      contentLabel="Example Modal"
    >
      <div>
        <h2 ref={subtitle => (this.subtitle = subtitle)}>{cell} title</h2>
        <button onClick={this.closeModal}>close</button>
        {cell}- {row.name}
        {row.record_type}: {row.specific_type}: {row.health_name}
      </div>
    </Modal>
  </span>
);
};

renderButtons is used in the table:

renderRecordsTable() {
    const records = this.props.records;
    const isPerson = this.props.recordable_type == 'user';

    const columns = [
      {
        dataField: 'id',
        formatter: this.renderButtons,
        text: '',
        headerTitle: false
      }

    ];
    return (
      <BootstrapTable
        keyField="id"
        data={records}
        columns={columns}
        filter={filterFactory()}
      />
    );
  }

and in my components render

render() {
  return (
    <div name="records" className="content">
        {this.renderRecordsTable()}
    </div>
  );
}
Sean Kelley
  • 491
  • 1
  • 9
  • 17
  • It might make sense to show how you're using `renderButtons` since the issue doesn't seem to be in `renderButtons` itself. You can also use the React Tools to look at the state for these components and see if it's what you expect. – Dave Newton Feb 14 '18 at 15:45
  • I added renderButtons related code. – Sean Kelley Feb 14 '18 at 19:40
  • Not sure if you're using the old deprecated version or the new one. But I might change the approach since you have the records available to load up the modal/etc with data grabbed directly from the records via the `rowIndex`. – Dave Newton Feb 14 '18 at 20:23
  • I am using latest react-bootstrap-table2. How would rowIndex help me? – Sean Kelley Feb 15 '18 at 03:42
  • It gives you the index into the records collection from which you can pull the required information, as opposed to building them all as you go. – Dave Newton Feb 15 '18 at 15:12

0 Answers0