How can i get the Id of the Todo Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How can i get the Id of the Todo without wasting too much if your time.

The question is published on by Tutorial Guruji team.

am trying to delete am item by id but i keep get error, that each child should have a unique key after giving a it an id, what am i doing wrongly, why am i not getting the id

const TodoList = () => {

    const [input, setInput] = useState("");
    const [todos, setTodos] = useState([])

    const handleSubmit = e => {

        e.preventDefault()

        setTodos([...todos, input])
        setInput("")
    }

    const handleDelete = id => {

       let item =  todos.filter(todo => todo.id !== id)

       console.log(item)
    //    setTodos(item)
    }




  return (
  <div className='todolist'>
      <h2>Todo List</h2>
      <form>
          <input value={input} onChange={e => setInput(e.target.value)} placeholder='write something' />
          <button onClick={handleSubmit}>Add todo</button>
      </form>
      {todos.map(todo => (

          <div key={todo.id}  className='todolist__details'>
              <h2>{todo}</h2>
              <DeleteIcon onClick={() => handleDelete(todo.id)} />
          </div>
      ))}
  </div>
  );
};

export default TodoList;

Answer

 {todos.map((todo, i) => {
        <div key={i}  className='todolist__details'>
              <h2>{todo}</h2>
              <DeleteIcon onClick={() => handleDelete(todo.id)} />
          </div>
    })}

You can check how list and keys work in react in here

https://reactjs.org/docs/lists-and-keys.html

We are here to answer your question about How can i get the Id of the Todo - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji