React Js todo list Example

      const { useState } = React;

​

      // Define the App component

      const App = () => {

        const [todos, setTodos] = React.useState([]);

        const [newTodo, setNewTodo] = React.useState("");

        const [editIndex, setEditIndex] = React.useState(-1); // Index of the todo being edited

​

        // Function to handle input change

        const handleInputChange = (event) => {

          setNewTodo(event.target.value);

        };

​

        // Function to add a new Todo

        const addTodo = () => {

          if (newTodo.trim() !== "") {

            if (editIndex !== -1) {

              // If editIndex is not -1, we are in edit mode

              const updatedTodos = [...todos];

              updatedTodos[editIndex] = { text: newTodo, completed: false };

              setTodos(updatedTodos);

              setNewTodo("");

              setEditIndex(-1); // Reset editIndex after updating the todo

            } else {

              setTodos([...todos, { text: newTodo, completed: false }]);

              setNewTodo("");

            }

          }

        };

​

        // Function to remove a Todo

        const removeTodo = (index) => {

          setTodos(todos.filter((_, i) => i !== index));

        };

​

        // Function to toggle the completion status of a Todo

        const toggleComplete = (index) => {

          const updatedTodos = [...todos];

          updatedTodos[index].completed = !updatedTodos[index].completed;

          setTodos(updatedTodos);

        };

​

        // Function to edit a Todo

        const editTodo = (index) => {

          setNewTodo(todos[index].text);

          setEditIndex(index);

        };

​

        // JSX for the Todo list

        return (

          <div className="todo-container">

            <h3>Reactjs todo list Example</h3>

            <input

              type="text"

              value={newTodo}

              onChange={handleInputChange}

              className="todo-input"

            />

            <button onClick={addTodo} className="todo-button">

              {editIndex !== -1 ? "Edit Todo" : "Add Todo"}

            </button>

            <ul className="todo-list">

              {todos.map((todo, index) => (

                <li key={index} className="todo-item">

                  <input

                    type="checkbox"

                    checked={todo.completed}

                    onChange={() => toggleComplete(index)}

                    className="todo-checkbox"

                  />

                  <span

                    style={{

                      textDecoration: todo.completed ? "line-through" : "none",

                      color: todo.completed ? "red" : "black",

                    }}

                    className="todo-text"

                  >

                    {todo.text}

                  </span>{" "}

                  <button

                    onClick={() => removeTodo(index)}

                    className="todo-remove-button"

                  >

                    Remove

                  </button>{" "}

                  <button

                    onClick={() => editTodo(index)}

                    className="todo-edit-button"

                  >

                    Edit

                  </button>

                </li>

              ))}

            </ul>

          </div>

        );

      };

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>