Rerendering component for already processed container not working properly?

Question

Can you explain to me why the rerendered element does not apply changes to the element state.status property? Is using the ReactDOM.unmountComponentAtNoderight way to do this? I know that an 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>

Run codeHide result

Answer 1

The main API for rendering in the DOM is as follows:

ReactDOM.render(reactElement, domContainerNode)

To update the properties of an existing component, you call render again with a new element.

React , , , invoke unmountComponentAtNode . . :

ReactDOM.unmountComponentAtNode(domContainerNode)

. unmountComponentAtNode . , . .

DOM. React Native iOS .

: https://facebook.imtqy.com/react/blog/2015/10/01/react-render-and-top-level-api.html