React: Why only one component can be render at root div?

[Easyvipin]

I called two render methods to same root div .

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

And what i get rendered on my screen is only a App component.
Just want to know that the one render method override the previous render method?

[bvaughn]

It's not clear to me what you're asking. Your App component can conditionally render different things, if that's what you mean.

Can you create a Code Sandbox example the shows what you're trying to do? Then link us to it with an explanation of what's not working?

[zxh19890103]

What do mean by saying "only one component"?

You can render an Array of components too. Or you can provide a Fragment component with many child components.

like:

ReactDOM.render([<App001/>, <App002/>], root)

[Easyvipin]

What do mean by saying "only one component"?

You can render an Array of components too. Or you can provide a Fragment component with many child components.

like:

ReactDOM.render([<App001/>, <App002/>], root)

![image](https://user-images.githubusercontent.com/11514991/71407194-5fe39180-2675-11ea-9784-743e4cb10345.png
Thanks for replying on this issue.
Yes,Rendering components though array is the Better solution to this problem.
But still I want to know why only one component rendered on the screen?
*I've edited my issue *

[Easyvipin]

It's not clear to me what you're asking. Your App component can conditionally render different things, if that's what you mean.

Can you create a Code Sandbox example the shows what you're trying to do? Then link us to it with an explanation of what's not working?

Thanks for replying on this issue,
Sorry that was all code on that issue.
*edited my issue for the same

[embeddedt]

ReactDOM.render replaces the contents of the element you pass to it. When you call it the second time, it removes the previous component's elements from the DOM, hence the behavior you're seeing.

As others have mentioned, you should use a fragment or array instead.

[bvaughn]

Seems like this issue has been answered now?

[bvaughn]

To clarify: the original question seems to be why the following code only ends up showing App rather than both Navigation and App.

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

The answer is that the second call to render replaces the first. If you want to render both Navigation and App, then you should render them both in the same call using either a "fragment" or an array:

RenderDOM.render(
  <React.Fragment>
    <Navigation />
    <App />
  </React.Fragment>,
  document.getElementById(" root ")
);

Hope this helps!