How to focus on specific card from card list React

user_8526311 0
Viewed 349

I'm work with React 17.0.2 with material ui and I want to focus on specific card from list of card by click (I'm attach a picture to show what I mean) I hope you will figure out what I want ..

enter image description here

<Grid md={3} className={classes.card}>
  <Card className={classes.root} style={{ cursor: "pointer" }}>
    <CardHeader title="דף צביעה" />
    <CardMedia
      className={classes.media}
      image={cardImage}
      title="Paint"
    />
    <CardActions disableSpacing>
      <IconButton aria-label="add to favorites">
        <FavoriteIcon />
      </IconButton>
      <IconButton aria-label="share">
        <ShareIcon />
      </IconButton>
      <Button>הורדה</Button>
    </CardActions>
  </Card>
</Grid>
material-ui reactjs grid css html
2 Answers

Append onClick function to your

Or you can wrap what's inside the component with and use onClick function in Button Base

    <Card>
      <ButtonBase
          className={props.classes.cardAction}
          onClick={event => { ... }}
      >
        <CardMedia ... />
        <CardContent>...</CardContent>
      </ButtonBase>
    </Card>

example thanks to this thread

user_166509910

You can add do one of the following

  1. Create a component of Dialog and on in card attach an onClick that will set Dialog Open and add the Dialog Data you want
  2. Create a Component that contain the dialog and the card and inside of it when you click you open the card and in this way you need to control only the open in each card by itself

Personally I use option number 2 cause like this I control one component and not all of them and do a re render of the parent component everytime

user_135821000
Related