How do I add an 'onClick' event to a mapped data?-CodePudding

        {data && data.map((data) => <Cards data={data} key={data._id} />)}

The code checks if there is data and of course if there is, it displays the card component. I want to add a click event so I could know which of the list of cards retuned in particular is being clicked. I've done this, it does not work.

{data && data.map((data) => <Cards onClick={click} data={data} key={data._id} />)}

and here is the click function

  const click = (e) => {
e.preventDefault();
console.log("clicked");

};

CodePudding user response：

You have a typo onClick and not onCLick

Edit: You can wrap the <Card/> inside a <div> and add onClick to the div or inside the <Card/> component add onClick to the parent component and pass your click function as a prop