How to make a sub component close when another element sub component is open react table 6

General
1

//Below is the code where React Table subcomponent prop is used along with React Modal

//if i open one subcomponent and roll to another, i am seeing row data of first sub component.

//Please help.

<button className=“label” onClick={()=>{this.submitCell(this.state)}}>submit to database submit if any of the records are edited
<ReactTable className=“react-table” data={ this.state.schemaData } columns={ this.state.columns } showPagination={true} showPaginationBottom= {true} defaultPageSize={5} page={this.state.page} pageSizeOptions={[3,5,7,10,15]} onPageChange={page => this.setState({page:page})} collapseOnDataChange={true} SubComponent={(row) => { return ( View Record Data <Modal
style={{ overlay: { backgroundColor: ‘transparent’, // Make the background transparent } }}
className=“modalTest” isOpen={this.state.isPopUpOpen} onRequestClose={this.closePopUp} contentLabel=“Example Modal” > Close {Object.keys(row.original).map((key)=>{return {key} {key!==“is_enabled”?(row.original[key]!==null?row.original[key]:“NULL”):(row.original[key]===false?0:1)}})}

  </Modal>         
           
      </div>
2

The issue you’re facing — where the wrong row data is shown in the modal after pagination or opening a different row — is due to improper state management of the modal and row data in your React Table’s SubComponent.

Problem Summary:

You’re opening a modal inside a SubComponent, but:

  • The modal’s state (isPopUpOpen) and content are global in the component.
  • When you change pages or rows, the modal still renders the previous row’s data, because it’s not scoped to the specific row.

Solution:

You should store the selected row’s data in state when opening the modal, so that the modal always shows the correct data regardless of pagination or scrolling.

Suggested Fix (Functional Example with Simplified Logic):

Here’s how you can fix it using better state management:

class MyComponent extends React.Component {
  state = {
    isPopUpOpen: false,
    selectedRowData: null,  // to hold the current row's data
    page: 0,
    schemaData: [],  // your table data
    columns: [],     // your table columns
  }

  openPopUp = (rowData) => {
    this.setState({
      isPopUpOpen: true,
      selectedRowData: rowData
    });
  }

  closePopUp = () => {
    this.setState({ isPopUpOpen: false, selectedRowData: null });
  }

  render() {
    return (
      <div>
        <button className="label" onClick={() => this.submitCell(this.state)}>
          Submit to database
        </button>

        <ReactTable
          className="react-table"
          data={this.state.schemaData}
          columns={this.state.columns}
          defaultPageSize={5}
          page={this.state.page}
          onPageChange={(page) => this.setState({ page })}
          SubComponent={(row) => (
            <div>
              <button onClick={() => this.openPopUp(row.original)}>View Record Data</button>
            </div>
          )}
        />

        <Modal
          isOpen={this.state.isPopUpOpen}
          onRequestClose={this.closePopUp}
          className="modalTest"
          style={{
            overlay: {
              backgroundColor: 'transparent',
            }
          }}
          contentLabel="Example Modal"
        >
          <button onClick={this.closePopUp}>Close</button>

          {this.state.selectedRowData &&
            Object.keys(this.state.selectedRowData).map((key) => (
              <div key={key}>
                <strong>{key}</strong>: {
                  key !== "is_enabled"
                    ? (this.state.selectedRowData[key] ?? "NULL")
                    : (this.state.selectedRowData[key] ? 1 : 0)
                }
              </div>
            ))
          }
        </Modal>
      </div>
    );
  }
}

Summary of Changes:

  • Added selectedRowData in state to track which row’s data is being shown in the modal.
  • Updated the SubComponent to include a button to open the modal with the right data.
  • Made modal content rely on selectedRowData, ensuring the correct row is always shown even after page change or scroll.