title: How to send props by clicking image in React
body: <p>I'm using <a href="https://material-ui.com/demos/dialogs/" rel="nofollow noreferrer">Dialog</a> component in <code>Material-UI</code>.</p>
  
  <p>I set up onClick so that I can open the dialog when clicking the image.</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;img
    onClick={this.handleClickOpen}
    alt="..."
    src={studio2}
    className={navImageClasses}
  /&gt;
  </code></pre>
  
  <p>This is how the dialog looks in the code level</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Dialog
    open={this.state.open}
    TransitionComponent={Transition}
    keepMounted
    onClose={this.handleClose}
  &gt;
    &lt;DialogTitle id="alert-dialog-slide-title"&gt;
      {"Test title"}
    &lt;/DialogTitle&gt;
    &lt;DialogContent&gt;
      &lt;DialogContentText id="alert-dialog-slide-description"&gt;
        {"I wanna put the image here."}
      &lt;/DialogContentText&gt;
    &lt;/DialogContent&gt;
  &lt;/Dialog&gt;
  </code></pre>
  
  <p>When I click the image, I wanna pass the whole image tag inside , so that I can show the magnified image. Since I'm new to React, I'm very lost here to do that. Can anyone help me do this?</p>