Using React portals to show a modal component(?) when a table row is clicked

Question

While becoming acquainted with React I stumbled upon the concept of portals in the developer documentation. However, I'm having difficulty understanding how this portal component actually renders on-demand, and how I can pass data to it to populate a modal.

Currently, I have two components that interact with each other: View.js and DataTable.js.

View.js:

const Example = (props) => {
    console.log(props);
    return (
        <div>
            <TopBar />
            <DeploymentsHeader env={props.match.params.env} />
            <PendingDataTable env={props.match.params.env} />
            <DataTable env={props.match.params.env} />
        </div>
    );
}

Now for the DataTable component, a react-table is being rendered. When a user clicks on an individual row, my goal is to have a modal pop up (still unclear to me whether or not this needs to have its own separate component if I'm using React portals) and have it be populated with data that is already bound to the individual row (which I tested and have access too).

The code looks something like this:

<ReactTable
   data={tableData}
   filterable={true}
   getTrProps={this.onRowClick}
       columns={[
          {
            Header: "Header",
            accessor: "service_name"
           },
           ...
           ]}
/>

Now this is the function that gets passed to the table row props and executes on click:

onRowClick = (state, rowInfo) => {
        return {
            onClick: e => {
                console.log('A Tr Element was clicked!');
                console.log(rowInfo.original);
            }
        }
    }

The data that I need is readily available to me in the object rowInfo.original. Now my question is: what is considered the 'correct' or 'best-practice' way to load a modal using a portal when an event such as this onClick trigger executes?

1. Do I need to have a separate Modal.js component that is actually a portal?
2. How do I get the data from this onRowClick function transported to this modal portal?

Thanks everyone.

Answer 1

You can conditionally render a portal as if it was just another React component. To start, you should separate the modal out into it's own component. Then, you can store the item id or item in state and toggle to let the modal know when to show or not.

onRowClick = (state, rowInfo) => {
    return {
        onClick: e => {
            console.log('A Tr Element was clicked!');
            console.log(rowInfo.original);
            this.setState({
                data: rowInfo.original,
                showModal: true
            });
        }
    }
}

render() {
    return (
        <ReactTable
            data={tableData}
            filterable={true}
            getTrProps={this.onRowClick}
            columns={[
                {
                    Header: "Header",
                    accessor: "service_name"
                },
                ...
            ]}
        />
        {this.state.showModal &&  React.createPortal( <Modal data={this.state.data}>Your Data Goes Here</Modal>, document.getElementById('modal-portal')) }
    )
}

EDIT:

They have a Modal example in their Portal docs that you should check out.

EDIT 2:

this.state.showModal is a piece of state that you need to add. You will use this to conditionally render the <Modal /> component (that you create). What I've done here is shorthand for:

if(this.state.showModal) {
    return React.createPortal(...);
} else {
    return null;
}

As for the actual <Modal /> component, you can make that however you want, you can use a react modal package, bootstrap modals or just build your own.

Example custom Modal.js:

const Modal = ({ children, data }) => (
    <div className="my-modal">
        {children}
        // Here you can do stuff with data if you want
    </div>
);

CSS:

.my-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}