title: React Material UI Cards w/Modal
body: <p>I'm trying to configure this React JS / Material UI modal dialog so that when the user clicks on the card, it opens a corresponding full-sized image (with title and subtitle). Data for each card is mapped from a JSON file (via AXIOS).</p>
  <p>I can get the modal window to open, but it is showing all of the card images in the modal and they are stacked on top of each other. The <code>console.log(&quot;SELECTED CAMPAIGN: &quot;, selectedCampaign)</code> code inside the <code>handleOpen()</code> function is one click behind...it actually logs the object that was selected prior to the current click event.</p>
  <p>I'm relatively new to functional components and hooks, so I know that I am making simple and fundamental mistakes...please help me figure out the proper way to set this up:</p>
  <pre><code>const CampaignItems = ({campaigns, loading}) =&gt; {
      const classes = useStyles();
  
      const [open, setOpen] = useState(false);
      const [selectedCampaign, setSelectedCampaign] = useState();
  
      const handleOpen = (campaign) =&gt; {
          setSelectedCampaign(campaign);
          console.log(&quot;SELECTED CAMPAIGN: &quot;, selectedCampaign);
          setOpen(true);
      };
  
      const handleClose = () =&gt; {
          setOpen(false);
      };
  
  ..................
  
  
  &lt;div&gt;
                  &lt;GridContainer&gt;
                      {campaigns &amp;&amp; search(campaigns).map((campaign) =&gt; (
                          &lt;GridItem key={campaign.id} xs={12} sm={6} md={4}&gt;
                              &lt;Card className={classes.root}&gt;
                                  &lt;CardActionArea&gt;
                                      &lt;CardMedia
                                          component=&quot;img&quot;
                                          alt={campaign.alt}
                                          height=&quot;140&quot;
                                          image={campaign.image}
                                          title={campaign.title}
                                          onClick={() =&gt; handleOpen(campaign)}
                                      /&gt;
                                      &lt;CardContent&gt;
                                      &lt;Typography gutterBottom variant=&quot;h5&quot; component=&quot;h2&quot;&gt;
                                          {campaign.title}
                                      &lt;/Typography&gt;
                                          &lt;Typography variant=&quot;body2&quot; color=&quot;textSecondary&quot; component=&quot;p&quot;&gt;
                                              {campaign.subtitle}
                                          &lt;/Typography&gt;
                                      &lt;/CardContent&gt;
                                  &lt;/CardActionArea&gt;
                                  &lt;CardActions&gt;
                                      &lt;IconButton
                                          size=&quot;medium&quot; 
                                          color=&quot;primary&quot; 
                                          aria-label=&quot;More Information&quot;
                                          onClick={() =&gt; handleOpen(campaign)}
                                      &gt;
                                          &lt;InfoIcon /&gt;
                                      &lt;/IconButton&gt;
  
                                      &lt;Modal
                                          className={classes.modal}
                                          open={open}
                                          onClose={handleClose}
                                          closeAfterTransition
                                          BackdropComponent={Backdrop}
                                          BackdropProps={{
                                              timeout: 500
                                          }}
                                      &gt;
                                          &lt;Fade 
                                              in={open}
                                          &gt;
                                              &lt;div className={classes.paper}&gt;
                                                  &lt;h6&gt;{campaign.title}&lt;/h6&gt;
                                                  &lt;p&gt;{campaign.subtitle}&lt;/p&gt;
                                                  &lt;img src={campaign.image} /&gt;
                                              &lt;/div&gt;
                                          &lt;/Fade&gt;
                                      &lt;/Modal&gt;
  
                                  &lt;/CardActions&gt;
                              &lt;/Card&gt;
                          &lt;/GridItem&gt;
                      ))}
                  &lt;/GridContainer&gt;
              &lt;/div&gt;
  
  ..................
  
  </code></pre>