Handle Click Event in a Stateless component and inside a map function

Question

I am using ReactJs and I have two stateless components:

The parent component receive a list of projects

{currentProjectData.map((project) => (
    <ProjectItem
      key={project.projectid}
      id={project.projectid}
      project={project}
    />
  ))}

and the child component receive the key

 return (
    <Card key={id} elevation={5} className={classes.root}>
      <Box
        borderLeft={componentItem.borderLeftValue}
        borderColor={componentItem.borderColorValue}
        onMouseOver={handleChangeOnMouseEnter}
        onMouseLeave={handleChangeOnMouseLeave}
      ></Card>)

I am having trouble trying to handle click event when someone clicks in the card i need the key

 const handleClick = (key) => {
   console.log(key);
  };

I put click event inside Card

<Card
  key={id}
  elevation={5}
  className={classes.root}
  onClick={handleClick(id)}
>

but the click event trigger when I move the cursor inside the card

Where should I handle the click event (Parent Component or Child Component) and how?

Answer 1

It needs to be on Card, what you pass to handleClick depends upon how you use props in child component, you can pass key or id. Syntax can be props.key or props.id as well if you are not destructuring props.

return (
    <Card key={id} elevation={5} className={classes.root} onClick={()=>handleClick(id)}>
      <Box
        borderLeft={componentItem.borderLeftValue}
        borderColor={componentItem.borderColorValue}
        onMouseOver={handleChangeOnMouseEnter}
        onMouseLeave={handleChangeOnMouseLeave}
      ></Card>)