how to get parent element id in React-CodePudding

I am using react with typescript. I am getting some data from the back-end API then I am rendering the data using the map function. The map function is to return a card in which I have two buttons and I want to perform some action based on the key that I provided on the map function.

As one of two buttons, there is a delete button which is sending the id of the card to the server for deletion.

              {items &&
              items.map((data) => {
                if (option[index]) {
                  return <Grid item lg={3} md={4} sm={6} xs={11} key={data.Id}>
                    <Card className="home-card">
                      <CardMedia
                        component="img"
                        height="256px"
                        image={homeimg}
                        alt="green iguana"
                      />
                      <CardContent>
                        <Typography gutterBottom variant="h5" component="div">
                          {data.name}
                        </Typography>
                      </CardContent>
                      <CardActions>
                        <Button size="small" variant="contained">
                          More Details
                        </Button>
                        <Button
                          size="small"
                          variant="contained"
// Here I want to get the key that I provided to the Grid element
                          onClick={handleClickOpen}
                        >
                          Delete
                        </Button>
                      </CardActions>
                    </Card>
                  </Grid>
                }
              })}

what is the best way to get that key?

CodePudding user response：

Because the map function effectively returns all data for that iteration of the current items you can simply access the value you pass to the key any time in that function. Assuming you want to handle the key value in handleClickOpen you can pass the value as a method parameter.

You will also likely want to pass to the onClick a function otherwise you will run into the handleClickOpen as soon as the component is rendered rather than when the user clicks the button.

Lastly, just a stylistic choice but you can also destructure the values of the data in your items

             {items &&
              items.map({Id, name} => {
                if (option[index]) {
                  return <Grid item lg={3} md={4} sm={6} xs={11} key={Id}>
                    <Card className="home-card">
                      <CardMedia
                        component="img"
                        height="256px"
                        image={homeimg}
                        alt="green iguana"
                      />
                      <CardContent>
                        <Typography gutterBottom variant="h5" component="div">
                          {name}
                        </Typography>
                      </CardContent>
                      <CardActions>
                        <Button size="small" variant="contained">
                          More Details
                        </Button>
                        <Button
                          size="small"
                          variant="contained"
                          onClick={() => (handleClickOpen(Id))}
                        >
                          Delete
                        </Button>
                      </CardActions>
                    </Card>
                  </Grid>
                }
              })}