2

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

1 respuesta 1

3

Al declarar tu evento on click estás ejecutando tu función removeTarget y pasandole el valor index por lo que al final onclick recibe el valor void porque removeTarget no retorna ningún valor.

Prueba pasando el index cómo parte del dataset de tu botón, de la siguiente manera:

<button data-index={index} onClick={removeTarget}>Delete</button>

Y despues puedes obtenerlo de la siguiente manera:

function removeTarget(event){
  const {index} = event.target.dataset; // o event.currentTarget.dataset*
  console.log(index);
}
1
  • Gracias por la ayuda amigo, me funciono! Commented el 18 dic. 2019 a las 22:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.