Click on a row to open a modal with the row's data
10,948
Why you return the modal with handleButtonClick
function instead of add it with ReactTable
<ReactTable
data={this.props.data}
columns={[
{
Header: "id",
accessor: "id",
width: 50
},
{
Header: "Name",
accessor: "name",
width: 200
},
{
Header: "",
id: "id",
Cell: ({ row }) => (
<button onClick={e => this.handleButtonClick(e, row)}>
Click Me
</button>
)
}
]}
defaultPageSize={10}
showPaginationBottom
/>
{this.state.visible && <Modal
title="title"
visible={this.state.visible}
>
// show data here
</Modal>}
handleButtonClick = (e, row) => {
this.setState({ visible: true});
};
![Anita](https://lh6.googleusercontent.com/-5ZerQkcsbpo/AAAAAAAAAAI/AAAAAAAAD6Q/u8Nq0yzyOmc/photo.jpg?sz=256)
Author by
Anita
Updated on July 01, 2022Comments
-
Anita almost 2 years
I am using react-table and here's my table:
<ReactTable data={this.props.data} columns={[ { Header: "id", accessor: "id", width: 50 }, { Header: "Name", accessor: "name", width: 200 }, { Header: "", id: "id", Cell: ({ row }) => ( <button onClick={e => this.handleButtonClick(e, row)}> Click Me </button> ) } ]} defaultPageSize={10} showPaginationBottom />
the action after the button click
handleButtonClick = (e, row) => { this.setState({ visible: true}); return <Modal title="title" visible={this.state.visible} > // show data here </Modal> };
So this is how I am working right now, but the modal isn't getting displayed. Can anyone help me with this? What am I doing wrong?