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