How can I create a new portal in react js?

Question

I'm trying to create a new portal with an id.

This is the index html file in the public folder:

 <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="other"></div>
  </body>

And here I tell react to render this component inside the div with the id of root:

import React from 'react';
import ReactDOM from 'react-dom';

function New() {
    return ReactDOM.createPortal(<h1>DEMO</h1>, document.getElementById('other'));
}

export default New;

But when I npm start I dont see anything inside the div with the id of other.

How can I create a new portal in react js properly?

Answer 1

I solved the problem by including the New component inside App.js file:

import React from 'react';
import logo from './logo.svg';
import './App.css';

import New from './New';

function App() {
    return (
        <div className="App">
            <New />
        </div>
    );
}

export default App;

And when I inspect it, the New component is actually inside the div with the id of other.

How can I create a new portal in react js?

Question

1 answers

solution1
0 ACCPTED 2020-07-26 11:38:19

How can I create a new portal in react js?

Question

1 answers

solution1 0 ACCPTED 2020-07-26 11:38:19

solution1
0 ACCPTED 2020-07-26 11:38:19