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 ..

<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>

CodePudding user response：

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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

example thanks to this thread