Actualmente estoy trabajando en una lista de tareas pendientes de react.js. El siguiente código es lo que he hecho hasta ahora que es relevante para la pregunta
Main File (App.js) import './App.css'; import Navbar from './components/Header' import Container from './components/Container.js'; import Input from './components/Input'; import { useState } from 'react'; function App() { let todo =[ {id:Math.random()*10000, title: "Walk the dog", completed:false}, {id:Math.random()*10000, title: "Wash Dishes", completed:false}, ] const [list,setList] = useState(todo) function addTodo(e) { let value = e.target.previousElementSibling.value; let newtodo = [...todo,{id: Math.random()*10000, title: value, completed:false}] setList(newtodo) console.log(todo) } return ( <div className="body"> <Navbar className="Navbar"/> <Input method = {addTodo} /> <Container list={newtodo}/> </div> ); } export default App; Container Component const Container =({list , method})=> { return( <div className="container"> {list.map(element => { return( <TodoComponent className="todo-list" data={element}/> ) })} </div> ) } export default Container Todo List Component import React from "react"; const TodoComponent = ({data})=> { return( <div className="todo-list" > <h3 key={data.id} >{data.title}</h3> <i className="fas fa-trash"></i> </div> ) } export default TodoComponent Form Input import React from "react" const Input = ({method}) => { return ( <div className="form"> <input placeholder="add task.."></input> <button onClick= {method}> Add </button> </div> ) } export default InputEl problema es que, cada vez que hago clic en el botón junto al campo de entrada, la matriz "todo" se actualiza, pero las actualizaciones no se representan en la lista de tareas pendientes. ¿Cómo puedo solucionar esto? Gracias por adelantado. Si esto fue demasiado confuso, por favor hágamelo saber.
Su función addTodo es incorrecta. en cambio ..todo debería ser ...list . prueba esto
function addTodo(e) { let value = e.target.previousElementSibling.value; let newtodo = [...list,{id: Math.random()*10000, title: value, completed:false}] setList(newtodo) console.log(todo) } y no está pasando el estado de la list al componente <Container/>
en lugar de
<Container list={newtodo}/>debería ser
<Container list={list}/>Primero verifique si tiene el value deseado en su función addTodo . El problema es que está actualizando la matriz de todo que no cambia porque no es una variable de estado. Probar:
function addTodo(e) { let value = e.target.previousElementSibling.value; setList(list => [...list, {id: Math.random()*10000, title: value, completed:false}) }