title: Sharing state from parent to child component in React
body: <p>I am having an issue binding the state of a parent component to the state of a child.  A look at the code:</p>
  
  <p>Parent Component:</p>
  
  <pre><code>    class ParentForm extends React.Component {
          constructor(){
              super();
              this.state = {
                  showDialog: false
              };
          }
  
          toggleDialog() {
              this.setState({showDialog: !this.state.showDialog});
          }
  
          return (
                  &lt;div &gt;
                      &lt;Button color='primary' onClick={() =&gt; this.toggleDialog()}&gt;&lt;/Button&gt;
                      &lt;MyDialog open={this.state.showDialog}/&gt;
                  &lt;/div&gt;
          );
      }
  </code></pre>
  
  <p>Child Component:</p>
  
  <pre><code>export default class MyDialog extends Component {
      constructor(props){
          super(props);
          this.state = {
              open: this.props.open
          };
      }
  
    handleRequestClose = () =&gt; {
      this.setState({ open: false });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;Dialog
            fullScreen
            open={this.state.open}
            onRequestClose={() =&gt; this.handleRequestClose()}
            transition={&lt;Slide direction="up" /&gt;}
          &gt;
           &lt;DialogTitle&gt;{'Title'}&lt;/DialogTitle&gt;
            &lt;DialogContent&gt;
              &lt;DialogContentText&gt;
                This is my dialog
              &lt;/DialogContentText&gt;
            &lt;/DialogContent&gt;
            &lt;DialogActions&gt;
              &lt;Button onClick={() =&gt; this.handleRequestClose()} color="primary"&gt;Close&lt;/Button&gt;
            &lt;/DialogActions&gt;
          &lt;/Dialog&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>In the Parent Component, if I make the state.showDialog property true, the dialog will open when the page loads. But once I close it one time, I am never able to open it again.  If I have it set to false, it doesn't load when the page loads, and I am never able to open the dialog, even when I click the button on the parent component.  Thank you in advance for taking your time to help.</p>