Below is the code. Whenever I am clicking on add to cart, for every item. I can see an alert. And Instead of item if I console.log something static it is also working but with item. I am getting a Synthetic Base Event in console
function Product() {
useEffect (() => {
fetchItems();
},[]);
const [items, setItems] = useState([]);
const fetchItems = async() => {
const data = await fetch('/product',{
method: "GET",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
credentials: "include"
});
const items = await data.json();
setItems(items);
};
const clickMe = (item) => {
alert("Working");
console.log(item);
};
return (
<div>
<h1>Product Page</h1>
{
items.map(item => (
<p>{item.productname} {item.productprice} {item.type} <a onClick={clickMe.bind(item)}>add to cart</a> </p>
))
}
</div>
)
}
export default Product
Here .bind doesn't do what you think it does.
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
With onClick={clickMe.bind(item)} you are only binding item to the this of the function and the onClick event is still passed as the first argument to the callback.
If you are wanting to pass the currently mapped item then this needs to be passed as an additional argument.
onClick={clickMe.bind(null, item)}
You could also just use an anonymous callback function.
onClick={() => clickMe(item)}
Or declare clickMe to be a curried function and return the click handler with the item closed over in callback scope.
const clickMe = (item) => () => {
alert("Working");
console.log(item);
};
...
onClick={clickMe(item)}