score:3

Accepted answer

react will replace the entire content of the specified element with the render output when it is called - which is also why you should not render into document.body.

you will want to use two separate containers (perhaps create another div element and give it a unique id). alternatively, if you don't need to have the separation of two react apps, you could instead combine the two into a single app:

reactdom.render(
  <react.fragment>
    <app />
    <characterapp />
  </react.fragment>,
  document.getelementbyid('root')
)

score:1

    `reactdom.render(
      <react.fragment>
       <app />
       <characterapp />
     </react.fragment>, document.getelementbyid('root'))` 

> this will work. you can not use same 'root' for rendering 2
> components. instead you can group them in one or use different div
> ids.

score:1

how can it render two modules ? you are rendering the app module in a div with id='root' and then you are overwriting it with another module. its the correct behaviour you can not render two modules like that. if you want to render both modules in the same page, create a separate component and import your app and characterapp in that module and then render that new component in the dom i.e

reactdom.render( <yournewcomponent />  ,
  document.getelementbyid('root')
)

and if you do not want to create a seperate component, you can just simple do this.

reactdom.render(
  <react.fragment>
    <app />
    <characterapp />
  </react.fragment>,
  document.getelementbyid('root')
)

score:1

this code is the culprit:

reactdom.render(<app />, document.getelementbyid("root"));
reactdom.render(<characterapp />, document.getelementbyid("root"));

you're using the same div for showing your apps, so the second statement is replacing the app component with characterapp.

you can create two divs in index.html, say, div#root-app and div#root-character-app, and then render the two components to the two containers respectively.


Related Query

More Query from same tag