title: How to use multiple dialog boxes and render modals in ReactJS
body: <p>I'm having trouble figuring out how to use Material UI's dialog box to render modals, close them upon button clicking and also make it so that clicking on different things brings up different modals.</p>
  
  <p>This is the dialog component that I took from Material UI</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import Button from '@material-ui/core/Button';
  import Dialog from '@material-ui/core/Dialog';
  import DialogActions from '@material-ui/core/DialogActions';
  import DialogContent from '@material-ui/core/DialogContent';
  import DialogContentText from '@material-ui/core/DialogContentText';
  import DialogTitle from '@material-ui/core/DialogTitle';
  
  
  class DialogBox extends React.Component {
  
    render() {
      return (
        &lt;Dialog
        open={this.props.open}
        onClose={this.props.handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      &gt;
        &lt;DialogTitle id="alert-dialog-title"&gt;{"Use Google's location service?"}&lt;/DialogTitle&gt;
        &lt;DialogContent&gt;
          &lt;DialogContentText id="alert-dialog-description"&gt;
            Let Google help apps determine location. This means sending anonymous location data to
            Google, even when no apps are running.
          &lt;/DialogContentText&gt;
        &lt;/DialogContent&gt;
        &lt;DialogActions&gt;
          &lt;Button onClick={this.props.handleClose} color="primary"&gt;
            Okay
          &lt;/Button&gt;
        &lt;/DialogActions&gt;
      &lt;/Dialog&gt;
      );
    }
  }
  
  
  export default DialogBox;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the page that I am rendering the Dialog Box in, I called it Modal in here. How do I make it so that I can close it when the dialog is open and also so I can click on a different picture and have it open up a dialog with different text?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React,{Component} from "react";
  import home from "./home.png";
  import car from "./car.png";
  import bed from "./bed.png";
  import pet from "./pet.png";
  import Dialog from "./Modal.js";
  
  class Scenarios extends Component {
    constructor(){
      super();
      this.state = { open: false };
    }
  
    openModal = () =&gt;{
      this.setState({ open: true });
    }
  
    handleClose = () =&gt; {
      this.setState({ open: false });
    };
  
    render() {
      return (
         &lt;section className="App-scenarios"&gt;
          &lt;h2&gt; Quick Tips &lt;/h2&gt;
          &lt;p&gt;Know What to Do in Different Scenarios during an Earthquake&lt;/p&gt;
          &lt;div className="scenario-group"&gt;
  
            &lt;div className="scenario" onClick={this.openModal}&gt;
              &lt;img src={car}/&gt;
            &lt;/div&gt; 
  
            &lt;div className="scenario" onClick={this.openModal}&gt;
            &lt;img src={home}/&gt;
              &lt;Dialog open={this.state.open} onClose={this.handleClose} title="Home" description="text" /&gt;
            &lt;/div&gt;
            &lt;div className="scenario" &gt;
            &lt;img src={bed}/&gt;
            &lt;/div&gt;
            
  
            &lt;div className="scenario"&gt;
            &lt;img src={pet}/&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      );
      }
  };
  
  export default Scenarios;</code></pre>
  </div>
  </div>
  </p>