CODEWITHSUNDEEP
reactjsmaterial-table
gene b.
gene b.

Reputation: 11984

React: Button in Material Table Row needs to pass param to Edit modal

I have a Material Table where each row's last column is an Edit button. When clicking the Edit button I need to pass some table row params (e.g. rowData.subjectId, rowData.username ) to the resulting Bootstrap-React Modal for editing. These data items are stored in the state.

These params don't come up in my modal and are empty ( {this.state.activeItemId}, {this.state.activeItemName}). The debugger shows that handleDialogOpen = (rowData) => {..} receives a completely different argument than the one I want, the Material Table's rowData.

Note: Currently I'm trying onClick={(rowData) => this.handleDialogOpen(rowData)}> . I also tried onClick={this.handleDialogOpen(rowData)} but that goes into an infinite loop, Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.

render() {
<MaterialTable 
    title="Material Table"
    columns={[
        { title: 'Subject ID', field: 'subjectId' },
        { title: 'Username', field: 'username' },
        { title: 'Actions', render: (rowData) => 
            <div>
                <Button onClick={(rowData) => this.handleDialogOpen(rowData)}>Edit</Button>
            </div>
        }
    ]}
    data={items}
/>

<Modal show={this.state.isDialogOpen} onHide={this.handleDialogClose}
       itemId={this.state.activeItemId} itemName={this.state.activeItemName}>
<Modal.Header closeButton>
  {/* DISPLAY ACTIVE ITEM ID / NAME HERE */}
  <Modal.Title>Modal heading {this.state.activeItemId} {this.state.activeItemName}</Modal.Title>
</Modal.Header>
<Modal.Body>
</Modal.Body>
<Modal.Footer>
  <Button variant="secondary" onClick={this.handleDialogCloseB}>
    Close
  </Button>
</Modal.Footer>
</Modal>    

}

// Dialog Open Handler
handleDialogOpen = (rowData) => {
    this.setState({isDialogOpen: true, activeItemId: rowData.subjectId, activeItemName: rowData.username});
};

Upvotes: 0

Views: 1702

Answers (1)

Arfan ali
Arfan ali

Reputation: 439

remove the param from onClick Event

<div>
    <Button onClick={() => this.handleDialogOpen(rowData)}>Edit</Button>
 </div>

Upvotes: 1

Related Questions