Soy un newbee todavía coqueteando con reactjs. ¿Por qué recibo este error cada vez que intento mostrar el contenido de la matriz de tareas? esta es mi aplicación.js
import React from 'react'; import { useState } from 'react' import './index.css'; import Navbar from './components/layout/Navbar'; import Tasks from './components/Tasks'; // import Message from './components/Message'; // import FunctionClick from './components/FunctionClick'; const App = () => { const [tasks, setTasks] = useState([ { id: 1, text: 'This is the first text', day: 'Feb 5th at 2:30pm', reminder: true, }, { id: 2, text: 'Meeting at School', day: 'Feb 6th at 1:30pm', reminder: true, }, { id: 3, text: 'third meeting', day: 'Feb 6th at 1:30pm', reminder: true, }, ]) return ( <div className="container"> <Navbar /> <Tasks tasks={tasks}/> </div> ); } export default App;y este es mi Tasks.js
import React from 'react' import Task from './Task' const Tasks = ({tasks}) => { return ( <> {tasks.map((task) => ( <Task key={task.id} task={task} /> ))} </> ) } export default Taskstarea.js
import React from 'react' export const Task = ({task}) => { return ( <div className='task'> <h3>{task.text} </h3> </div> ) } export default Task;no muestra error en la consola pero se muestra en el navegador. he estado atascado ayudame por favor. puedes intentar probarlo en tu aplicación. Gracias
creo que por tu error
Uncaught TypeError: Cannot read properties of undefined (reading 'map')si haces los cambios de la siguiente manera
const Tasks = ({tasks}) => { if(tasks && tasks.length > 0) { return ( <> {tasks.map((task) => ( <Task key={task.id} task={task} /> ))} </> ) } else return null; } entonces puede omitir ese error. Como puede ver, puse si la condición dentro del componente Tasks para verificar la matriz de tasks