title: Open a modal for a specific card from a list of cards using React hooks
body: <p>I am using an API to fetch and render the data it into cards. I want to render a corresponding modal for each card when the card is clicked. I am using the <a href="https://material-ui.com/components/modal/" rel="nofollow noreferrer">React modal component</a> by material-ui (the simple modal example). The problem is that instead of the modal for the clicked card, I'm getting the modal for the last card. I managed to &quot;capture&quot; the data of the clicked card in a state hook, but I'm not sure how to use that to render the correct component.</p>
  <p><strong>This is the Home component where the cards are rendered:</strong></p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import axios from 'axios';
  import { BeerCardExpanded } from './BeerCardExpanded';
  import { BeerCard } from './BeerCard';
  
  import { makeStyles } from '@material-ui/core/styles';
  import Modal from '@material-ui/core/Modal';
  
  import '../styles/Home.css';
  import { DialogContent } from '@material-ui/core';
  
  function rand() {
    return Math.round(Math.random() * 20) - 10;
  }
  
  function getModalStyle() {
    const top = 50 + rand();
    const left = 50 + rand();
  
    return {
      top: `${top}%`,
      left: `${left}%`,
      transform: `translate(-${top}%, -${left}%)`,
    };
  }
  
  const useStyles = makeStyles(theme =&gt; ({
    paper: {
      position: 'absolute',
      width: 400,
      backgroundColor: theme.palette.background.paper,
      border: '2px solid #000',
      boxShadow: theme.shadows[5],
      padding: theme.spacing(2, 4, 3),
    },
  }));
  
  export const Home = () =&gt; {
    const ref = React.createRef();
    const classes = useStyles();
    const [modalStyle] = React.useState(getModalStyle);
    const [beers, setBeers] = useState([]);
    const [open, setOpen] = useState(false);
    const [isClicked, setIsClicked] = useState([]);
  
    const fetchBeerData = async () =&gt; {
      try {
        const { data } = await axios.get(
          'https://api.punkapi.com/v2/beers?per_page=9'
        );
        console.log(data);
        return data;
      } catch (err) {
        console.log(err);
      }
    };
  
    useEffect(() =&gt; {
      fetchBeerData().then(data =&gt; {
        setBeers(data);
      });
    }, []);
  
    const handleOpen = id =&gt; {
      setIsClicked(isClicked.push(beers.filter(item =&gt; item.id === id)));
      setIsClicked(id);
      setOpen(true);
      console.log(isClicked[0]);
    };
  
    const handleClose = () =&gt; {
      setOpen(false);
      setIsClicked([]);
    };
  
    return (
      &lt;div className='beer-container'&gt;
        {beers.map((beer, index) =&gt; (
          &lt;&gt;
            &lt;BeerCard
              key={beer.name}
              beer={beer}
              id={index}
              handleOpen={handleOpen}
            /&gt;
            &lt;Modal
              aria-labelledby='transition-modal-title'
              aria-describedby='transition-modal-description'
              open={open}
              onClose={handleClose}
            &gt;
              &lt;DialogContent&gt;
                &lt;BeerCardExpanded
                  id={`${isClicked.id}-${isClicked.name}`}
                  className={classes.paper}
                  style={modalStyle}
                  beer={beer}
                  ref={ref}
                /&gt;
              &lt;/DialogContent&gt;
            &lt;/Modal&gt;
          &lt;/&gt;
        ))}
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p><strong>This is the BeerCard component:</strong></p>
  <pre><code>import React, { useState } from 'react';
  import '../styles/BeerCard.css';
  import CardActions from '@material-ui/core/CardActions';
  import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
  import FavoriteIcon from '@material-ui/icons/Favorite';
  import IconButton from '@material-ui/core/IconButton';
  
  export const BeerCard = ({ beer, handleOpen }) =&gt; {
    const [isFavorite, setIsFavorite] = useState(false);
  
    const handleIconClick = e =&gt; {
      e.stopPropagation();
      setIsFavorite(!isFavorite);
    };
  
    return (
      &lt;div className='card' onClick={() =&gt; handleOpen(beer.id)}&gt;
        &lt;div className='image-container'&gt;
          &lt;img src={beer.image_url} alt={beer.name} /&gt;
        &lt;/div&gt;
  
        &lt;div className='info-container'&gt;
          &lt;section className='name-tagline'&gt;
            &lt;p className='beer-name'&gt;{beer.name}&lt;/p&gt;
            &lt;p className='beer-tagline'&gt;
              &lt;i&gt;{beer.tagline}&lt;/i&gt;
            &lt;/p&gt;
          &lt;/section&gt;
          &lt;p className='beer-description'&gt;{beer.description}&lt;/p&gt;
        &lt;/div&gt;
        &lt;CardActions className='favorite-icon'&gt;
          &lt;IconButton aria-label='add to favorites'&gt;
            {!isFavorite ? (
              &lt;FavoriteBorderIcon onClickCapture={e =&gt; handleIconClick(e)} /&gt;
            ) : (
              &lt;FavoriteIcon onClickCapture={e =&gt; handleIconClick(e)} /&gt;
            )}
          &lt;/IconButton&gt;
        &lt;/CardActions&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p><strong>And the BeerCardExpanded is the component that gets injected in the material-ui's modal component:</strong></p>
  <pre><code>import React, { useState } from 'react';
  import CardActions from '@material-ui/core/CardActions';
  import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
  import FavoriteIcon from '@material-ui/icons/Favorite';
  import IconButton from '@material-ui/core/IconButton';
  
  import '../styles/BeerCardExpanded.css';
  
  export const BeerCardExpanded = React.forwardRef(({ beer }, ref) =&gt; {
    const [isFavorite, setIsFavorite] = useState(false);
  
    const handleIconClick = e =&gt; {
      e.stopPropagation();
      setIsFavorite(!isFavorite);
    };
  
    return (
      &lt;div className='beer-card' ref={ref}&gt;
        &lt;CardActions className='favorite-icon'&gt;
          &lt;IconButton aria-label='add to favorites'&gt;
            {!isFavorite ? (
              &lt;FavoriteBorderIcon onClickCapture={e =&gt; handleIconClick(e)} /&gt;
            ) : (
              &lt;FavoriteIcon onClickCapture={e =&gt; handleIconClick(e)} /&gt;
            )}
          &lt;/IconButton&gt;
        &lt;/CardActions&gt;
  
        &lt;section className='top'&gt;
          &lt;section className='image-name-tagline'&gt;
            {&lt;img src={beer.image_url} alt={beer.name} /&gt;}
            &lt;section className='right-side'&gt;
              &lt;p className='beer-name'&gt;{beer.name}&lt;/p&gt;
              &lt;p className='beer-tagline'&gt;
                &lt;i&gt;{beer.tagline}&lt;/i&gt;
              &lt;/p&gt;
            &lt;/section&gt;
          &lt;/section&gt;
          &lt;p className='beer-description'&gt;{beer.description}&lt;/p&gt;
        &lt;/section&gt;
  
        &lt;section&gt;
          &lt;p className='food-pairing'&gt;
            &lt;i&gt;
              Pairs best with:
              {beer.food_pairing.map((item, index) =&gt; (
                &lt;span key={(item, index)}&gt; ☆{item} &lt;/span&gt;
              ))}
            &lt;/i&gt;
          &lt;/p&gt;
        &lt;/section&gt;
      &lt;/div&gt;
    );
  });
  </code></pre>
  <p>I created a codesandbox, here's the <a href="https://codesandbox.io/s/bold-dew-yo8nw?file=/src/components/Home.js" rel="nofollow noreferrer">link</a>.</p>