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?
The parameter that gets passed to your click handler dosent't have a target.value.emoji, that's why you are getting undefined.
One way to do what you want is to change logger to this:
const logger = (emoji) => {
alert(emoji);
};
And Card component to:
const Card = ({ _name, emoji, logger }) => {
return (
<div style={styles.wrapper}>
<button onClick={e => logger(emoji)}>-</button>
<h4>
{_name} {emoji}
</h4>
</div>
);
};