How can I assign a key to an item in my array in react js?

Question

I don't understand how to assign a key to my array elements. I need to assign a key to each card traveled with my map function. I was trying many things and nothing. I look forward to your prompt help. Thank you.

return( 
<Fragment>
<ul>
<Grid container justify="center" alignItems="center">
    { products && products.map((item, index) => {
        return(
        // Comienza la tarjeta.
            <Card className={classes.card}>
              <CardHeader
                avatar={
                  <Avatar aria-label="recipe" src={item.image} className={classes.avatar}/>
                }
                action={
                    obtainRoleUser() === true?
                    <div>
                        <Settings
                            aria-controls="customized-menu"
                            aria-haspopup="true"
                            variant="contained"
                            color="primary"
                            onClick={handleClick}
                        />
                        <StyledMenu
                            id="customized-menu"
                            anchorEl={anchorEl}
                            keepMounted
                            open={Boolean(anchorEl)}
                            onClose={handleClose}
                        >
                            <StyledMenuItem>
                                <ListItemIcon>
                                    <Edit fontSize="small" />
                                </ListItemIcon>
                                <ListItemText primary="Editar Producto" />
                            </StyledMenuItem>
                            <StyledMenuItem>
                                <ListItemIcon>
                                    <Delete fontSize="small" />
                                </ListItemIcon>
                                <ListItemText primary="Borrar Producto" />
                            </StyledMenuItem>
                        </StyledMenu>
                    </div>
                    : 
                    <div/>
                }
                title={item.name + " " + index}
                subheader={"Categoria: " + item.category}
              />
              <CardMedia
                className={classes.media}
                image={item.image}
                title={item.image.title}
              />
              <CardContent>
                <Typography variant="body2" color="textSecondary" component="p">
                  {item.description}
                </Typography>
              </CardContent>
              <CardActions disableSpacing>
            <h5>{item.price + "Bs"}</h5>
              <Grid container justify="center" alignItems="center">
                  <IconButton color="primary" aria-label="add to favorites">
                     <Favorite />
                  </IconButton>
                  <IconButton color="primary" aria-label="add to shopping cart">
                     <AddShoppingCart />
                  </IconButton>
              </Grid>
              </CardActions>
            </Card>
        );
    })
    }
  </Grid>
   </ul>
  </Fragment>
  );
  }

I need assign a key or number for each target or products in my array. I can't resolve this, i have many issues with key and index products array.

Answer 1

    return( 
    <Fragment>
    <ul>
    <Grid container justify="center" alignItems="center">
        { products && products.map((item, index) => {
            return(
            // Comienza la tarjeta.
                <Card className={classes.card} key={item.id}>
                  <CardHeader
                    avatar={
                      <Avatar aria-label="recipe" src={item.image} className={classes.avatar}/>
                    }
                    action={
                        obtainRoleUser() === true?
                        <div>
                            <Settings
                                aria-controls="customized-menu"
                                aria-haspopup="true"
                                variant="contained"
                                color="primary"
                                onClick={() => handleClick(item.id)}
                            />
                            <StyledMenu
                                id="customized-menu"
                                anchorEl={anchorEl}
                                keepMounted
                                open={Boolean(anchorEl)}
                                onClose={handleClose}
                            >
                                <StyledMenuItem>
                                    <ListItemIcon>
                                        <Edit fontSize="small" />
                                    </ListItemIcon>
                                    <ListItemText primary="Editar Producto" />
                                </StyledMenuItem>
                                <StyledMenuItem>
                                    <ListItemIcon>
                                        <Delete fontSize="small" />
                                    </ListItemIcon>
                                    <ListItemText primary="Borrar Producto" />
                                </StyledMenuItem>
                            </StyledMenu>
                        </div>
                        : 
                        <div/>
                    }
                    title={item.name + " " + index}
                    subheader={"Categoria: " + item.category}
                  />
                  <CardMedia
                    className={classes.media}
                    image={item.image}
                    title={item.image.title}
                  />
                  <CardContent>
                    <Typography variant="body2" color="textSecondary" component="p">
                      {item.description}
                    </Typography>
                  </CardContent>
                  <CardActions disableSpacing>
                <h5>{item.price + "Bs"}</h5>
                  <Grid container justify="center" alignItems="center">
                      <IconButton color="primary" aria-label="add to favorites">
                         <Favorite />
                      </IconButton>
                      <IconButton color="primary" aria-label="add to shopping cart">
                         <AddShoppingCart />
                      </IconButton>
                  </Grid>
                  </CardActions>
                </Card>
            );
        })
        }
      </Grid>
       </ul>
      </Fragment>
      );
      }

Answer 2

Pass an index value in as your second parameter and use it to set the component's id:

 return ( <div> {myArr.map((el, idx) => { <MyComponent key={idx} title={el.title} content={el.content} /> })} </div> )