React todo app example

react-todo-app-example.jsx

import { useState } from "react";

import cx from "classnames";

const App = () => {
  const [todoValue, setTodoValue] = useState("");
  const [todos, setTodos] = useState([
    {
      id: 0,
      value: "test todo element 1",
      isDone: false
    }
  ]);

  const handleChange = (e) => {
    //Updating local component state
    setTodoValue(e.target.value);
  };

  const clearInput = () => {
    //Clear existing value in input
    document.getElementById("todoValueInput").value = "";
    //Updating local component state
    setTodoValue("");
  };

  const addTodo = () => {
    setTodos([
       ...todos,
       {
         id: todos.length,
         value: todoValue,
         isDone: false
       }
     ]);
     clearInput();
   };

   let remainingTodoElements = todos.filter((todo) => {
    return !todo.isDone;
  });

  const setTodoAsDone = (id) => {
    const todosNew = [...todos];
    todosNew.map((t) => {
      if (t.id === id) {
        t.isDone = !t.isDone;
      }
      return t;
    });
    setTodos(todosNew)
  };

  return (
    <>
    <div>
      <h2>Todo List</h2>
    </div>
    <input
      id="todoValueInput"
      onChange={(e) => handleChange(e)}
    ></input>
    <button onClick={() => addTodo()}>Add</button>
    <p>
      {remainingTodoElements.length} Remaining out of{" "}
      {todos.length} tasks
    </p>
    <ul>
      {todos.map((todo) => {
        return (
          <li
            key={todo.id}
            className={cx({ "is-done": todo.isDone })}
            onClick={() => setTodoAsDone(todo.id)}
          >
            {todo.value}
          </li>
        );
      })}
    </ul>
    <style>{`
      .is-done {
          text-decoration: line-through;
      }
    `}</style>
  </>
  );
};

export default App;