I have a component which i have imported into another component. When I click the component, the onclick function refuses to run.
This is the code for the component
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>
)
}
THIS IS THE function that runs the onClick function. The console returns nothing
<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)}
/>
Your onClick is not defined in your function HomeFeedCard.
const HomeFeedCard = ({ name, image, published, quantity, weight, onClick }) => {
return (
<div onClick={onClick} />
)
}
If you don't know which properties you want to set use: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes
In the HomeFeedCard, you are not expecting an onClick function as a prop.
You need to explicitly bind the onClick to an actual element. You can wrap content inside HomeFeedCardwith adiv`.
OR, pass onClick further to Grid if accepts a click handler.
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)}
/>