Open popup on DataTable row click in ReactJS

Question

I'm using reactjs-popup and react-data-table-component npm libraries and I want to open a pop-up window when a row is clicked.

This is my code:

    onRowClicked = (rowData,e) => {
        return (<Popup
            trigger={/*e.target.value*/}
            modal>
            {
                close => (
                    <div>
                      // some code
                    </div>
                )
            }
        </Popup>)
    }

    render() {
        return (
            <DataTable
                title={title}
                columns={columns}
                data={data}
                highlightOnHover={true}
                pointerOnHover={true}
                onRowClicked={this.onRowClicked}
                noDataComponent='No content'
            />
        )
    }

Is it possible to bind the trigger attribute of Popup to the clicked row?

```onRowClicked``` is an event handler. Why do you use it as rendering function?, This will not gonna work. — Antoan Elenkov, Feb 02 '20 at 13:56
you have to set a state in `onRowClicked` function and then conditionally render the popup based on that state — Agney, Feb 02 '20 at 14:00

score 1 · Answer 1 · edited Oct 18 '20 at 15:41

One Naive way to do this would be by putting the table details in the pop trigger for instance

render() {

    let SongList = this.state.Songs.map(({Artist,Title, Album, Id}, index) => {
            return (   
              <Popup modal trigger={<tr key={Id}  >
                      <td>{index+1}</td>
                      <td>{Artist}</td>
                      <td>{Title}</td>
                      <td>{Album}</td>
                  </tr>}>
                  {close => <Content4 close={close} />}
                </Popup>
            );
          });
    return(
    <>
        {SongList}
      </>
     );
}

It works but it is not the most neat or optimal code

Open popup on DataTable row click in ReactJS

1 Answers1