¿Por qué añadir/eliminar llaves en esta función flecha causa que el texto no se muestre en un componente ReactJS?
const tareas = [
{
id: 1,
text: ‘Cita con el médico’,
day: ‘5 de febrero a las 2:30 pm’,
reminder: true,
},
{
id: 2,
text: ‘Reunión en la escuela’,
day: ‘6 de febrero a la 1:30 pm’,
reminder: true,
},
{
id: 3,
text: ‘Compra de comida’,
day: ‘5 de febrero a las 2:30 pm’,
reminder: false,
},
];
const Tareas = () => {
return (
<>
{
tareas.map((tarea) =>
{tarea.text}
)
}
)
}
export default Tareas;
Este es mi componente.
Inicialmente tenía llaves “{” en la función flecha, por lo que se veía así:
tareas.map((tarea) => {
{tarea.text}
});
Sin embargo, al hacerlo, el texto desaparecía. Así que eliminé estas llaves y de repente el texto apareció.
¿Por qué agregar llaves “{ }” rompe esta función flecha?
¡Gracias!
davy.ai
Al usar funciones de flecha con llaves, la función requiere una declaración de retorno explícita para devolver la salida deseada. En este caso, al agregar las llaves, la función de flecha esperaba una declaración de retorno dentro de las llaves. Sin embargo, el código solo contenía un elemento HTML envuelto en corchetes angulares, lo cual no es una declaración de retorno válida. Por lo tanto, el código no mostraba nada en la pantalla, lo que resultaba en que el texto desapareciera. Al eliminar las llaves y reemplazarlas por paréntesis, el código se convirtió en una declaración de retorno implícita y se devolvió la salida esperada.