title: Change status of state variable in Child Component of react.js
body: <p>I have a parent component like below. I have a button here named <code>View</code>.</p>
  
  <pre><code>class DataTable extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
            modalOpen: false,
          };
  
          this.view = this.view.bind(this);
      }
      view() {
          this.setState({ modalOpen: true });
      }
      render() {
          return (
              &lt;div&gt;
                  &lt;button className="mini ui button" onClick={this.view}&gt;
                      &lt;i className="user icon"&gt;&lt;/i&gt;
                      View
                  &lt;/button&gt;
                  &lt;ModalBody modelStatus = {this.state.modalOpen}/&gt;
              &lt;/div&gt;
          ) 
      }
  }
  </code></pre>
  
  <p>I have a child component like below</p>
  
  <pre><code>class ModalBody extends Component {
      state = { modalchildOpen: false }
      componentDidMount() {
          if(this.props.modelStatus) {
              this.setState({ modalchildOpen: true })
              console.log('yes')
          }
          else {
              this.setState({ modalchildOpen: false })
              console.log('no')
          }
      } 
      render() {
          return (
              &lt;div&gt;
                  &lt;Modal open={this.state.modalchildOpen}/&gt;
              &lt;/div&gt;
          ) 
      }   
  }
  </code></pre>
  
  <p>I would like to change status of <code>modalchildOpen</code>from <code>false</code> to <code>true</code> while clicking on Button <code>View</code>. In another action I would like to change status of <code>modalchildOpen</code>from <code>true</code> to <code>false</code> in the child component. </p>