Ad

Multiple ReactDom.render Calls In Bundle.js

- 1 answer

I had an issue yesterday that you can read about here and it relates. I thought that changing my directory name was messing up my react components, but I think I figured out the problem.

I'm building a web app with node/express/react and I'm rendering react server side and creating a bundle.js file to use client-side. I have multiple react components that I'm rendering on the page, but they're not all in the same 'react app'. Basically I have a few 'mini react apps' so each set of functionality has its own ReactDom.Render call.

for example, I have a form at the top for adding new items, that has its own render, and I have a list of items below that, that has its own render call. and both of these mini-components are bound to separate divs.

<div id='the-form'><%-form%></div>
<div id='the-list'><%-list%></div>

however, it looks like the component that comes first in the bundle.js is the one whose render call is working, the other component(s) render initially from the server-side rendering, but then there are no updates because the components are not re-rendering/updating.

is there a way to keep my approach but have these working?

Ad

Answer

Remove window.onLoad and just use ReactDOM.render alone.

Ad
source: stackoverflow.com
Ad