Why are all the dropdowns of cards happening at the same time?

Viewed 22

I am using Material UI in a React app.

I have implemented cards with expandable dropdowns; click a card, get more info.

I want to implement multiple cards, separately expandable. Currently when I click the down arrow (to expand) on one card all cards expand.

I can't figure out what's going wrong. Here is my code.

const ExpandMore = styled((props) => {
  const { expand, ...other } = props;
  return <IconButton {...other} />;
})(({ theme, expand }) => ({
  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
  marginLeft: 'auto',
  transition: theme.transitions.create('transform', {
    duration: theme.transitions.duration.shortest,
  }),
}));

function Blogs(){
    const [expanded, setExpanded] = React.useState(false);

    const handleExpandClick = () => {
      setExpanded(!expanded);
    };

    return (
        <>
         <Grid container direction="row" justifyContent="center">
         <Grid item xs={4}>
        <Box m={6}>
      <Card sx={{ maxWidth: 345 }}>
        <CardHeader
          title="It’s a cocktail o’clock."
          subheader="May 14, 2021"
        />
        <CardMedia
          component="img"
          height="194"
          image="https://img.freepik.com/free-photo/selection-various-cocktails-table_140725-2909.jpg?w=2000"
          alt="Paella dish"
        />
        <CardContent>
          <Typography variant="body1" color="text.secondary">
          Beat The Heat With Chilled Cocktails At The Best Bars In New York.
          </Typography>
        </CardContent>
        <CardActions disableSpacing>
          <ExpandMore
            expand={expanded}
            onClick={handleExpandClick}
            aria-expanded={expanded}
            aria-label="show more"
          >
            <ExpandMoreIcon />
          </ExpandMore>
        </CardActions>
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <CardContent>
            <Typography paragraph>To a foodie, summer means one thing and one thing only – DRINKS!</Typography>
            <Typography paragraph>
            Yes people, we know it’s hot out there and the only way to quench your thirst is by guzzling down a bunch of ice-cold cocktails
            </Typography>
            <Typography paragraph>
              <h4>1.The Bar Room at The Beekman</h4>
              Visit the beautiful Bar Room in the historic Beekman Hotel for high-key romance that really wows.
              Do try the whiskey sour.One of the best drinks available.
              <h4>2.Dublin House</h4>
              You can never go wrong with Sláinte! Margarita,Pot O'Gold, & Irish Old Fashioned
            <h4>3.Russian Samovar</h4>
            Alpensahne,Amarula Cream Liqueur, Caribou,Feni
            </Typography>
          </CardContent>
        </Collapse>
      </Card>
      </Box>
      </Grid>

      <Grid item xs={4}>
      <Box m={6}>
      <Card sx={{ maxWidth: 345 }}>
        <CardHeader
          title="Winner Winner Pizza Dinner"
          subheader="May 14, 2021"
        />
        <CardMedia
          component="img"
          height="194"
          image="https://cdn.shopify.com/s/files/1/0624/9853/articles/20220211142645-margherita-9920.jpg?crop=center&height=800&v=1660843558&width=800"
          alt="Paella dish"
        />
        <CardContent>
          <Typography variant="body2" color="text.secondary">
          Beat The Heat With Chilled Cocktails At The Best Bars In New York.
          </Typography>
        </CardContent>
        <CardActions disableSpacing>
          <ExpandMore
            expand={expanded}
            onClick={handleExpandClick}
            aria-expanded={expanded}
            aria-label="show more"
          >
            <ExpandMoreIcon />
          </ExpandMore>
        </CardActions>
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <CardContent>
            <Typography paragraph>To a foodie, summer means one thing and one thing only – DRINKS!</Typography>
            <Typography paragraph>
            Yes people, we know it’s hot out there and the only way to quench your thirst is by guzzling down a bunch of ice-cold cocktails
            </Typography>
            <Typography paragraph>
              <h4>1.The Bar Room at The Beekman</h4>
              Visit the beautiful Bar Room in the historic Beekman Hotel for high-key romance that really wows.
              Do try the whiskey sour.One of the best drinks available.
              <h4>2.Dublin House</h4>
              You can never go wrong with Sláinte! Margarita,Pot O'Gold, & Irish Old Fashioned
            <h4>3.Russian Samovar</h4>
            Alpensahne,Amarula Cream Liqueur, Caribou,Feni
            </Typography>
          </CardContent>
        </Collapse>
      </Card>
      </Box>
      </Grid>
   </Grid>
      </>
    );
}
0 Answers
Related