How to append or inject React Class Component in a Modal outside React Tree

Question

We have a project build in PHP MVC Framework and we use jQuery as a global JS framework in handling UI activity etc, however, we are now using react js. Therefore, my question is how can I inject or append React Functional/Class-based Component to a current jquery built-in modal() component? I try to run the following code but the modal content shows [object Object]...

onClick handler:

this.testHandler = () => {
            const x = `<div>${<Component />}</div>`
            $('#test-123').modal()
            $('#test-123 #modal-body').append(x)
        }

This Component Returns a Table with a list of data coming from api endpoint, the table is working and displaying properly when i render it. But my main goal is to use it outside and inject it as a modal content.

Thanks in advance!

Answer 1

The way to render a react component outside of react is to call ReactDOM.render , passing in the react element you want to render and the dom element you want to put it in. For sites that are fully done in react, you would typically call this exactly once. But if necessary, you can do it on the fly or multiple times, targetting specific pieces of your dom.

const element = $('#test-123 #modal-body').get(0);
ReactDom.render(<div><Component /></div>, element);

Be aware that React assumes it is the only piece of code modifying the part of the dom tree that you tell it to operate in. So you should avoid making any further changes to the #modal-body element using jquery.