Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

226
Visualizações
React To Do list not updating

I am currently working on a react.js to do list. The code below is what i've done so far which are relevant to the question

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 Input

The problem is, whenever I click the button next to the input field, the "todo" array updates, but the updates do not get rendered in the to do list. How do i fix this? Thanks in advance. If this was too confusing, please let me know.

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Your addTodo function is incorrect. instead ..todo it should be ...list. try this

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)
  }

and you are not passing list state to <Container/> component

insted of

<Container list={newtodo}/>

it should be

<Container list={list}/>
about 4 years ago · Juan Pablo Isaza Relatório

0

First verify if you have the desired value in your addTodo function. The problem is you are updating the todo array which doesn't change because it is not a state variable. Try:

  function addTodo(e) {
    let value = e.target.previousElementSibling.value;
    setList(list => [...list, {id: Math.random()*10000, title: value, completed:false})
  }
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda