Complete React todo list

Hi, here you have a code of a “todo list” this code have – add todo, edit todo, delete todo and complete todo.
// Dependencies
import React, { useState } from 'react';
// Styles
import './todo.css';
// Main component
const Todo = () => {
// Local state
const [userValue, setUserValue] = useState("");
const [todoList, setTodoList] = useState([]);
const [action, setAction] = useState('add');
const [currentIndex, setCurrentIndex] = useState(-1);
const [complete, setComplete] = useState([]);
// Methods
// getting the user value
// onChange
const handleUserValue = ({ target: { value }}) => {
setUserValue(value); // saving into local state
}
// Adding the user value to the DOM
// onClick
const addTodo = () => {
if (action === 'add') {
// need to be a letter and not a number
if (userValue !== "" && isNaN(userValue)) {
setTodoList([...todoList, userValue]); //save the actual items in the array + the new one
}
}
// cleanning the user input
setUserValue("");
}
// Deletting
const handleDelete = (todo, index) => {
// Return me all the todos in that array, but not this item whith this index
const newTodos = todoList.filter((item, i) => i !== index);
// Update the local state
setTodoList(newTodos);
}
// Updating
const handleUpdate = (todo, index) => {
setUserValue(todo); // To change the text on the input text
setAction('update'); // To change the button by "edit button"
setCurrentIndex(index); // To save the current index of the item that will be edited
}
const updateTodo = () => {
const newTodos = [...todoList];
newTodos[currentIndex] = userValue; // updating this todo index
// Adding update items to the local state
setTodoList(newTodos);
// cleanning the user input
setUserValue("");
}
// To mark todo as complete
const handleComplete = (i) => {
const completeIndexes = [...complete, i];
setComplete(completeIndexes);
}
return (
<>
<h1>Im todo component</h1>
<section className="form">
<h2>Insert todo:</h2>
<input
type="input"
placeholder="Insert todo ..."
id="todoInputText"
className="todoText"
autoFocus="autofocus"
value={userValue}
onChange={handleUserValue}
/>
{
action === 'add' ? (
<input
type="submit"
value="add"
id="todoInputSave"
className="todoButtonAdd"
onClick={() => addTodo()}
/>
) : (
<input
type="submit"
value="update"
id="todoInputUpdate"
className="todoButtonUpdate"
onClick={() => updateTodo()}
/>
)
}
</section>
<section className="todoList">
<h3>My todo list:</h3>
{
todoList.length > 0 ? (
<>
<ul>
{
todoList.map((todo, index) => {
return (
<li
key={index}
className={` ${ complete.includes(index) ? 'complete' : '' } `}
>
{todo}
<span
onClick={() => handleDelete(todo,index)}
>X</span>
<span
onClick={() => handleUpdate(todo,index)}
className="update"
>Update</span>
<span
onClick={() => handleComplete(index)}
className="noncomplete"
>complete</span>
</li>
)
})
}
</ul>
</>
) : ''
}
</section>
</>
)
}
export default Todo;
Result:

By Cristina Rojas.