Acabo de empezar a inclinarme por Reac. Tratando de construir una aplicación simple, que muestra la lista de tareas. Sin embargo, cuando ejecuto la aplicación, no muestra nada en el navegador. No hay ningún error en la consola ni nada. No estoy seguro de lo que falta aquí.
Aquí está el código:
import React from 'react'; import TaskList from './TaskList'; function App() { const tasks = [ {id:0,description:"1st Task",isDone:false}, {id:1,description:"2st Task",isDone:false} ] return ( <div> <TaskList tasks={tasks} /> </div> ); } export default App; import React from "react"; import Task from "./Task"; export default({ tasks }) => { return ( <ul className="list-group"> { tasks.map(task => { <li key={task.id} className="List-group-item"> <Task task={task} /> </li> })} </ul> ) } import React from "react"; export default ({task}) => { return( <p> {task.description} </p> ) }La lista de tareas no se muestra en la pantalla, ni hay ningún error en la consola.
Aquí es donde está haciendo mal, en su función de map en TaskList.js no está devolviendo nada. Prueba con esto:
import React from "react"; import Task from "./Task"; export default({ tasks }) => { return ( <ul className="list-group"> { tasks.map(task => { return (<li key={task.id} className="List-group-item"> <Task task={task} /> </li>) })} </ul> ) }En su componente TaskList, no devolvió nada que necesite reemplazar { por (
import React from "react"; import Task from "./Task"; export default ({ tasks }) => { return ( <ul className="list-group"> {tasks.map((task) => ( <li key={task.id} className="List-group-item"> <Task task={task} /> </li> ))} </ul> ); };No está devolviendo nada en su ciclo .map() . Debería ser
tasks.map(task => { return <li key={task.id} className="List-group-item"> <Task task={task} /> </li> })}O como no tiene ninguna otra lógica dentro de su función de devolución de llamada, simplemente puede eliminar los corchetes y la función de flecha devolverá la declaración jsx única de forma predeterminada.
{tasks.map((task) => <li key={task.id} className="List-group-item"> <Task task={task} /> </li> )}