Q:

Rerendering component to already rendered container doesnt work as expected?

Can you explain it to me why rerendered element doesnt apply change to the element state.status property?Is using ReactDOM.unmountComponentAtNode proper way to do this?I know that the element should not delete itself but this is for presentation.

class CustomModal extends React.Component {
  
  constructor(props){
    super(props)
    this.state = {
    
      status:this.props.status
    
    }
    this.onClick = this.onClick.bind(this);
  }
  

  render(){
   return  <h1 onClick={this.onClick}>Click Me!</h1>
  }
  
  onClick(){
    
    console.log('May i log to console?:' + this.state.status)
    

    this.setState({status:false});
    
    // this is somewhat cumbersome?
    {/* ReactDOM.unmountComponentAtNode(document.getElementById('container')) */}
    
    // supposed to rerender the element?
    // And the state.status element should be true?
        ReactDOM.render(<CustomModal status={true} />,document.getElementById('container'))
  }

}


      ReactDOM.render(<CustomModal status={true} />,document.getElementById('container'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="container">

</div>

A:

The primary API for rendering into the DOM looks like this:
ReactDOM.render(reactElement, domContainerNode)

To update the properties of an existing component, you call render
  again with a new element.
If you are rendering React components within a single-page app, you
  may need to plug into the app's view lifecycle to ensure your app will
  invoke unmountComponentAtNode at the appropriate time. React will not
  automatically clean up a tree. You need to manually call:
ReactDOM.unmountComponentAtNode(domContainerNode)

This is important and often forgotten. Forgetting to call
  unmountComponentAtNode will cause your app to leak memory. There is no
  way for us to automatically detect when it is appropriate to do this
  work. Every system is different.
It is not unique to the DOM. If you want to insert a React Native view
  in the middle of an existing iOS app you will hit similar issues.

Source: https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html

