const tasks = [ { id: 1, text: 'Doctors Appointment', day: "Feb 5th at 2:30 pm", reminder: true, }, { id: 2, text: "Meeting at School", day: "Feb 6th at 1:30pm", reminder: true, }, { id: 3, text: "Food Shopping", day: "Feb 5th at 2:30pm", reminder: false, }, ]; const Tasks = () => { return ( <> { tasks.map((task) => <h3>{task.text}</h3> ) } </> ) } export default Tasks;Este es mi componente. Inicialmente, tenía llaves en la función de flecha, por lo que se veía así:
tasks.map((task) => { <h3>{task.text}</h3> }Sin embargo, hacerlo hizo que el texto desapareciera. Así que eliminé estas llaves y de repente apareció el texto.
¿Por qué agregar llaves rompe esta función de flecha?
¡Gracias!
Necesita la palabra clave de retorno en caso de que use llaves en su función de flecha.
tasks.map((task) => { return <h3>{task.text}</h3> } )Las llaves se utilizan para delimitar el cuerpo de la función, por lo tanto, necesita una declaración de return para devolver un valor:
tasks.map((task) => { return <h3>{task.text}</h3> })