Expand one card on click

问题

Currently using Material-UI-React for the first time to build out cards that expand, the issue I'm running into is when I click on one card to expand, they all expand.How can I refactor my code to only allow the card that is clicked on to expand not affecting the others?

const useStyles = makeStyles(theme => ({
  card: {
    maxWidth: 300
  },
  media: {
    height: 0,
    paddingTop: '56.25%' // 16:9
  },
  expand: {
    transform: 'rotate(0deg)',
    marginLeft: 'auto',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest
    })
  },
  expandOpen: {
    transform: 'rotate(180deg)'
  }
}));

const HomePageCards = props => {
  console.log(props);
  const classes = useStyles();
  const [expanded, setExpanded] = React.useState(false);

  function handleExpandClick() {
    setExpanded(!expanded);
  }
  return (
    <Card className={classes.card}>
      <CardHeader title={props.title} subheader={`User: ${props.username}`} />
      <CardMedia
        className={classes.media}
        image='https://source.unsplash.com/1600x900/?crafts'
        title={props.title}
      />
      <CardContent>
        <Typography variant='body2' color='textSecondary' component='p'>
          {props.description}
        </Typography>
      </CardContent>
      <CardActions disableSpacing>
        <IconButton
          className={clsx(classes.expand, {
            [classes.expandOpen]: expanded
          })}
          onClick={handleExpandClick}
          aria-expanded={expanded}
          aria-label='show more'
        >
          <ExpandMoreIcon />
        </IconButton>
      </CardActions>
      <Collapse in={expanded} timeout='auto' unmountOnExit>
        <CardContent>
          <Typography paragraph>Method:</Typography>
          <Typography paragraph>
            <strong>Step 1:</strong>
            {props.step_1}
          </Typography>
          <Typography paragraph>
            <strong>Step 2:</strong>
            {props.step_2}
          </Typography>
          <Typography paragraph>
            <strong>Step 3:</strong>
            {props.step_3}
          </Typography>
          <Typography>
            <strong>Step 4:</strong>
            {props.step_4}
          </Typography>
          <Typography>
            <strong>Step 5:</strong>
            {props.step_5}
          </Typography>
        </CardContent>
      </Collapse>
    </Card>
  );
};

import React, { useEffect, useState } from 'react';
import Axios from 'axios';

import HomePageCards from '../HomePageCards/HomePageCards';

const HomePage = props => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const token = localStorage.getItem('token');
    Axios.get('https://bw-how-to.herokuapp.com/guides', {
      headers: { authorization: token }
    })
      .then(res => {
        // console.log('Data', res.data);
        setUsers(res.data);
      })
      .catch(err => console.error(err));
  }, []);

  return (
    <div className='character-list grid-view'>
      {users.map(user => (
        <HomePageCards {...user} key={user.id} />
      ))}
    </div>
  );
};

export default HomePage;

I looked around but can't seem to find the solution. Any suggestions or guidance would be greatly appreciated. Thank you in advance.

来源：https://stackoverflow.com/questions/57699182/expand-one-card-on-click

标签

javascript

reactjs

components

material-ui