Why only one component can be render at root div?

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]

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!

[bvaughn]

Seems like this issue has been answered now?