Hola necesito mostrar el indice de un producto en particular al hacer clic en el boton DELETE. Como puedo hacer eso? Gracias de ante mano, estuve intentando y nada. Me muestra por consola los numeros del 0 al 7 (3 veces), es decir, entra en la funcion removeTarget sin yo hacer click, no entiendo.
function removeTarget(index){
console.log(index);
return;
}
return(
<Fragment>
<ul>
<Grid container justify="center" alignItems="center">
{ products && products.map((item, index) => {
return(
// Comienza la tarjeta.
<Card className={classes.card} key={index}>
<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>
<Button onClick={removeTarget(index)}>Delete</Button>
</Grid>
</CardActions>
</Card>
);
})
}
</Grid>
</ul>
</Fragment>
);
}
Ya tengo asignado la key={index} en la Card, pero no funciona, no comprendo y cuando hace la iteracion la funcion map(), llama a la funcion removeTarget(index) sola, sin que yo presione click al boton DELETE...