1

I'm getting this error in my React App:

App.js:

render() {
  return(
    <div>
      <Header />
      <div id="body">
        <MainContainer />
      </div>
    </div>
  );     
}

MainContainer.js:

functComp1() {
  ReactDOM.render(<OtherComponent />, document.getElementById('body');
}

render() {
  return (
    <div className="row">
      <div><a onClick={this.functComp1}>Component1</a></div>
      <div><a onClick={this.functComp2}>Component2</a></div>
      <div><a onClick={this.functComp3}>Component3</a></div>
    </div>
  );
}

When I click a Component link it works perfectly but the console shows this message:

Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render.

How can I prevent this warning from appearing?

Greg K
  • 10,770
  • 10
  • 45
  • 62
CrazyDave
  • 21
  • 1
  • 2
  • Possible duplicate of [React server rendering --> Replacing React-rendered children with a new root component](http://stackoverflow.com/questions/36653557/react-server-rendering-replacing-react-rendered-children-with-a-new-root-com) – kalpetros May 09 '17 at 15:11
  • 1
    It means instead of using ReactDOM.render(, document.getElementById('body'); you should add a child element for inside your and update its state as shown in this link - reachttps://stackoverflow.com/questions/39041710/react-js-change-child-components-state-from-parent-component – Dhanashree Sep 06 '17 at 10:45

0 Answers0