How do you remount a component in reactjs?

Question

I have a component that I need to re-mount. I need to destroy everything and make it's code re-execute to appear again on my page.

What I've tried: I put key="1" and then with javascript changed its key to something else, it did not remount ( https://groups.google.com/forum/#!topic/reactjs/8JgClU9jol0 )

Unmounting React.js node this won't work because my component is already rendered.

Please help, how do I do this?

Answer 1

Here is an example.

 class Child extends React.Component { componentDidMount = () => { console.log("mounted"); } render(){ return( <div>This is child</div> ); } } class Application extends React.Component { state = { show: true, }; render(){ return( <div> <button onClick={() => this.setState({show: !this.state.show})}>Click here</button> {this.state.show && <Child />} </div> ); } } ReactDOM.render(<Application />, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>