I am creating a modal. This modal will be opened when any of 6 div
elements are clicked. Each of the components are created using the .map()
function to an array. The popup
parameter is supposed to be the function that runs when clicked:
items.map(item => (
<StoreItem popup={() => popup} item={item} />
))
For each item
from items
, there is a StoreItem
created. Here is the code for the StoreItem
component:
const StoreItem = ({popup, item}) => {
return (
<div onClick={popup(item)} className="...">
...
</div>
);
};
As seen above, each StoreItem
is a div
with an onClick
property that runs the popup()
function. Here’s the popup()
function:
function popup(item) {
console.log(item);
}
For some reason, when I console.log(item)
, the item
that is supposed to be passed in from the onClick
is not being logged. Rather, I’m getting a SyntheticBaseEvent
with random stuff that I don’t want.
How is this fixed so that the contents of item
are properly displayed, not some SyntheticBaseEvent
?
Thanks, any help is appreciated.