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

Currently, I have two ponents 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 ponent, 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 ponent 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 ponent that is actually a portal?
2. How do I get the data from this onRowClick function transported to this modal portal?

Thanks everyone.

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

Currently, I have two ponents 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 ponent, 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 ponent 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 ponent that is actually a portal?
2. How do I get the data from this onRowClick function transported to this modal portal?

Thanks everyone.

• javascript
• reactjs
• react-modal

2 Answers 2

You can conditionally render a portal as if it was just another React ponent. To start, you should separate the modal out into it's own ponent. 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 /> ponent (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 /> ponent, 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%);
}

Note ReactDOM.createPortal its a function from react-dom not react

import {createPortal} from 'react-dom'