why TODO list is not working properly in reactjs

Question

import React from 'react'
const Todo = () => {
    const[newitem,setNewitem]=React.useState("");
    const [list,setList]=React.useState([]);
    function addItem(todovalue)
    {
        if(todovalue!=="")
        {
            const newItem={
                id:1 + Math.random(),
                value:todovalue,
                isDone:false
            }
            const list=[...list];
            list.push(newItem);
            setNewitem({list,newItem:""});
        }
    }
    function deleteItem(id)
    {
        const list=[...list];
        const updatedlist=list.filter(item=>item.id!==id);
        setNewitem({updatedlist});
    }
    function update(input)
    {
        setNewitem({newItem:input});
    }
    return (
        <div className="container">
           
            <h1>Add an item...</h1>
            <input type="text" placeholder="add item" required value={newitem} onChange={e=>update(e.target.value)}/>
            <button clasName="add-btn" onClick={()=>addItem(newitem)} disabled={newitem.length}>Add Todo</button>
            <div className="list">
                <ul>
                    {
                        list.map(item=>{
                            return(
                                <li key={item.id}>
                                    <input type="checkbox" checked={item.isDone} onChange={()=>{}}/>
                                    {item.value}
                                    <button className="btn" onClick={()=>{deleteItem(item.id)}}>Delete</button>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>

            
        </div>
    )
}

export default Todo when we going to write some text in text field it get only [object Object] and when we click on Add Todo button its throws error "Cannot access 'list' before initialization" how to resolve that one

that's because newItem should be a string but you're assigning an object to it in update — bel3atar
– bel3atar, Commented Dec 10, 2021 at 16:20
do you still not understand what the error meant? reading the error is key — David Grosh
– David Grosh, Commented Dec 10, 2021 at 16:29

HelloWorldEngineer · Accepted Answer · 2021-12-10 16:24:50Z

Here is a working version (I've also implemented the checkbox feature):

Please note I have removed your id generation. 1 + Math.random() will return an id between 1 and 2. It would create an error in your list (each item needs a unique key), and it would also create conflicts when deleting an item or checking the isDone checkbox.

import React from 'react'

function Todo () {
    const [newitem, setNewitem] = React.useState("");
    const [list, setList] = React.useState([]);

     const addItem = (value) => {
       const newItem={ id: list.length +1, value, isDone:false }
       setNewitem("")
       setList(prev=> ([...prev, newItem]));
    }

    const deleteItem = (id) => {
        const updatedlist= [...list].filter(item => item.id !== id);
        setList(updatedlist);
    }

    const onCheck = (id) => {
      const updatedList = [...list].map(todo=> {
        if(todo.id === id){
          return {...todo, isDone: !todo.isDone}
        }
        return todo
      })
      setList(updatedList)
    }


    return (
        <div className="container">
            <h1>Add an item...</h1>
            <input type="text" placeholder="add item" required  value={newitem} onChange={e=> setNewitem(e.target.value)}/>
            <button clasName="add-btn" onClick={()=>addItem(newitem)} disabled={!newitem}>Add Todo</button>
            <div className="list">
                <ul>
                    {list.map(item=>(
                       <li key={item.id}>
                          <input type="checkbox" checked={item.isDone} onChange={()=> onCheck(item.id)}/>
                             {item.value}
                          <button className="btn" onClick={()=> deleteItem(item.id) }>Delete</button>
                        </li>
                            ))
                    }
                </ul>
            </div>

            
        </div>
    )
}
export default function App(){
  return <Todo/>
}

Collectives™ on Stack Overflow

why TODO list is not working properly in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related