Tengo un componente que he importado a otro componente. Cuando hago clic en el componente, la función onclick se niega a ejecutarse.
Este es el código del componente.
const HomeFeedCard = ({ name, image, published, quantity, weight }) => { const classes = useHomeFeedCardStyles() return ( <Grid item xs={6} md={3} sm={4} lg={3}> <Paper elevation={5}> <img src={image?.url} alt='Product' className={classes.image} /> <div className={classes.container}> <Avatar alt='image' src='https//user.png' sx={{ width: 56, height: 56, mr: 1 }} /> <div className={classes.textContainer}> <Typography variant='h6' component='body'> <LinesEllipsis text={` ${name}`} /> </Typography> <Typography>{`${quantity} left | ${weight}KG`}</Typography> </div> </div> </Paper> </Grid> ) }ESTA ES LA función que ejecuta la función onClick. La consola no devuelve nada.
<HomeFeedCard key={product._id} name={product.productName} published={product.published} image={product.images[0]} quantity={product.quantity} weight={product.weight} onClick={() => console.log('product', product.productName)} />Su onClick no está definido en su función HomeFeedCard.
const HomeFeedCard = ({ name, image, published, quantity, weight, onClick }) => { return ( <div onClick={onClick} /> ) }Si no sabe qué propiedades desea configurar, use: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes
En HomeFeedCard , no espera una función onClick como accesorio.
Debe vincular explícitamente onClick to an actual element. You can wrap content inside de HomeFeedCard with a div`.
O bien, pase onClick más a Grid si acepta un controlador de clics.
const HomeFeedCard = ({ name, image, published, quantity, weight, onClick }) => { const classes = useHomeFeedCardStyles(); return ( <div onClick={onClick}> <Grid item xs={6} md={3} sm={4} lg={3}> <Paper elevation={5}> <img src={image?.url} alt="Product" className={classes.image} /> <div className={classes.container}> <Avatar alt="image" src="https//user.png" sx={{ width: 56, height: 56, mr: 1 }} /> <div className={classes.textContainer}> <Typography variant="h6" component="body"> <LinesEllipsis text={` ${name}`} /> </Typography> <Typography>{`${quantity} left | ${weight}KG`}</Typography> </div> </div> </Paper> </Grid> </div> ); }; <HomeFeedCard key={product._id} name={product.productName} published={product.published} image={product.images[0]} quantity={product.quantity} weight={product.weight} onClick={() => console.log("product", product.productName)} />