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.