Here is my component:
const Card = ({ _name, emoji, logger }) => {
return (
<div style={styles.wrapper}>
<button onClick={logger}>-</button>
<h4>
{_name} {emoji}
</h4>
</div>
);
};
And here is my App.js:
const arr = [
{ _name: 'Apple', emoji: '?', id: '01' },
{ _name: 'Banana', emoji: '?', id: '02' },
{ _name: 'Peach', emoji: '?', id: '03' },
{ _name: 'Pineapple', emoji: '?', id: '04' },
{ _name: 'Mango', emoji: '?', id: '05' },
{ _name: 'Melon', emoji: '?', id: '06' },
];
const App = () => {
const logger = (el) => {
alert(el.target.value.emoji);
};
return (
<div style={styles.wrapper}>
{arr.map((item) => {
return (
<Card
_name={item._name}
emoji={item.emoji}
key={item.id}
logger={logger}
/>
);
})}
</div>
);
};
I'm trying to show the element emoji when you click on it. When I click on each item I got undefined. Why is that? What is the problem?
