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

Answer 1

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