I have a component. But the onClick function isn't running-CodePudding

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)}
                />

CodePudding user response：

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

CodePudding user response：

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)}
/>