React: appending a component to the body directly

I have a main App component with its own background, that renders most of the components and takes half the size of the body. I want another component to take the other half. How do I accomplish this? (the new component would go in the white half)

If you are using create-React-app then you’ll want to check the index.js file and the index.html file in the src folder.

I have already set the width and height of the body and html to 100%. But I don´t know how to render a component outside the main App wrapper.

In index.js you have

ReactDOM.render(<App />, document.getElementById('root'));

which renders App component into element with id root (in index.html).

Make another one.

Oh…Do I need to specify a new root element? Or to the same root?

Why don’t you just try both ways and see what happens?

Tried to, but it´s rendering a white screen with no error:

ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));

ReactDOM.render(&lt;Chart /&gt;, document.getElementById('root'));

And this, after creating a new root2 element in index.html which throws an error (“Target is not a DOM element”)

ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));

ReactDOM.render(&lt;Chart /&gt;, document.getElementById('root2'));

Looks like you have done something wrong in index.html.

On the first approach, I didn´t modify it.
On the second one, it looks like this:

 <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="root2"></div>

Looks ok. Try to restart react app.

I keep getting:
Target container is not a DOM element.

Well you tried. I would say check to make sure you imported your files in index.js:

import {Chart} from './Chart';

But I’m just guessing in the dark at this point. I think it may be time to show your code.

1 Like

Keep getting the same error. I´m going to paste the full code, albeit with only the main components at hand:

class App extends Component {
  render() {
    return (
      <div id="main-menu">
        <p id="invitation_title">
          Escapate a
          </p>
        <p id="city_title">Nueva York</p>
        <Menu />
        <FlightSelector />
      </div>
    );
  }
}

Second component:

class Chart extends Component {
    render() {
      return (
        <div id="container2">
        <p>ssssssssss</p>
        </div>
      );
    }
  }

CSS:

#main-menu{
  text-align:center;
  background-image: url('https://www.wallpaperflare.com/static/474/423/653/new-york-city-sunset-city-cityscape-wallpaper.jpg');
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
  width:100%;
  height:50%;
  overflow: auto;
}

index.html:

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

index.js:

ReactDOM.render(<App />,  document.getElementById('div1'));
ReactDOM.render(<Chart />, document.getElementById('div2'));

You have divs with id app1 and app2, but your looking for elements with id div1 and div2.

Pasted an old edit. Keep getting the same error:
<div id=“root”></div>

<div id=“root2”></div>

ReactDOM.render(<App />, document.getElementById(‘root’));

ReactDOM.render(<Chart />, document.getElementById(‘root2’));

Go to codesandbox link I posted and paste your code there (comment out my lines). See if it breaks.