Hi, I’m working on a small simple project and the whole idea is to be able to add and delete todos. But the problem I’m having is when I enter the data into a **input** field the event handler adds a new **todo** when I console log it but the UI is not updated in the browser? So in the **input** event handler( **handleSubmit** ) when I reset the **input** value after changing the state of todo then it updates the UI Element in the browser. Same goes with the delete button but this time resetting the **input** doesn’t delete the todo but instead typing any keyword on a **input** filed deletes the UI that was clicked to delete. Not sure what I’m missing here? Any help would be very appreciated. Thank you.
Code:
This is the todo.jsx file
```auto
import React, { useState } from "react";
import { useEffect } from "react";
import { addTodo, getTodos, todoDelete } from "../fakeTodosService";
export default function Todo() {
const [input, setInput] = useState("");
const [todos, setTodos] = useState([]);
const [error, setError] = useState("");
useEffect(() => {
setTodos(getTodos());
}, []);
function handleDelete(list) {
setTodos(todoDelete(list));
}
function handleSubmit(e) {
e.preventDefault();
if (input.trim() === "") setError("Enter value first!");
else {
setError("");
setTodos(addTodo(input));
setInput(""); //when this is removed the newly added todo won't show in the browser
}
}
function handleChange({ currentTarget: input }) {
const inputValue = input.value;
setInput(inputValue);
}
return (
You should declare `id` at the top if the file like so:
```auto
let lastId = 0;
```
And then when creating the Todo item, you can use it and increment it.
As for the bug, I think you should make some changes to the addTodo function.
Instead of writing `todos.push(todo)`, you can try writing `return [...todos, todo] `.
---