Aquí está mi componente:
const Card = ({ _name, emoji, logger }) => { return ( <div style={styles.wrapper}> <button onClick={logger}>-</button> <h4> {_name} {emoji} </h4> </div> ); }; Y aquí está mi 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> ); }; Estoy tratando de mostrar el elemento emoji cuando haces clic en él. Cuando hago clic en cada elemento, tengo undefined . ¿Porqué es eso? ¿Cuál es el problema?
El parámetro que se pasa a su controlador de clics no tiene un target.value.emoji , es por eso que se está volviendo undefined .
Una forma de hacer lo que quiere es cambiar el logger a esto:
const logger = (emoji) => { alert(emoji); }; Y componente de Card para:
const Card = ({ _name, emoji, logger }) => { return ( <div style={styles.wrapper}> <button onClick={e => logger(emoji)}>-</button> <h4> {_name} {emoji} </h4> </div> ); };