React Todo List - JavaScript Exercise 5

Overview

Create a React todo list component that allows users to add, delete, and mark items as completed. The todo list should be displayed as a list of items, with a checkbox next to each item to mark it as completed. Users should be able to add new items to the list using a text input field and delete items by clicking a "delete" button next to each item. When the user adds or deletes an item, the todo list should be updated in real-time.

Requirements

The component should render a list of todo items, with a checkbox next to each item to mark it as completed.
Users should be able to add new items to the list using a text input field.
Users should be able to delete items from the list by clicking a "delete" button next to each item.
Completed items should be displayed with a strikethrough style.
When the user adds or deletes an item, the todo list should be updated in real-time.
The component should be reusable and easily customizable.
The code should be well-organized and maintainable.
The component should follow best practices for React development, such as using state and props to manage data and passing event handlers down to child components.

Instructions

Create a new component called TodoList.
Add state to the TodoList component to store the list of todo items.
Render the list of todo items using the map method.
Add a checkbox next to each item to mark it as completed.
Add a text input field to the TodoList component to allow users to add new items to the list.
Add an "Add" button to the TodoList component that adds the new item to the list when clicked.
Add a "Delete" button next to each item that removes the item from the list when clicked.
Add a CSS class to completed items to display them with a strikethrough style.
Update the state of the TodoList component in real-time when items are added or deleted.
Test the component to make sure it works as expected.
Refactor and optimize the code as needed.
Add any additional features or functionality as desired.
Document the code and include any necessary comments to make it clear and understandable for other developers.
Publish the component to an appropriate package manager or repository for others to use.

Bonus Requirements

Add the ability for users to edit existing todo items. Users should be able to click on an item to select it for editing, and the item should be replaced with a text input field where they can edit the item's text. When the user presses Enter or clicks outside the input field, the item should be updated with the new text. If the user presses Escape or clicks outside the input field without making any changes, the item should remain unchanged.

Before you dive into the final output, I want to encourage you to take some time to work through the exercise yourself. I believe that active learning is the most effective way to learn and grow as a developer.

So, grab a pen and paper, fire up your code editor, and get ready to dive into the React todo list exercise. Once you have completed the exercise, feel free to return to this blog post to compare your solution to mine.

Output for the Todo list exercise

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [editingIndex, setEditingIndex] = useState(null);
  const [newTodoText, setNewTodoText] = useState('');

  const handleCheckboxChange = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  };

  const handleNewTodoChange = (event) => {
    setNewTodoText(event.target.value);
  };

  const handleNewTodoSubmit = (event) => {
    event.preventDefault();
    if (newTodoText.trim() === '') {
      return;
    }
    const newTodos = [...todos, { text: newTodoText, completed: false }];
    setTodos(newTodos);
    setNewTodoText('');
  };

  const handleDeleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  const handleEditTodo = (index) => {
    setEditingIndex(index);
  };

  const handleEditTodoChange = (event) => {
    const newTodos = [...todos];
    newTodos[editingIndex].text = event.target.value;
    setTodos(newTodos);
  };

  const handleEditTodoBlur = () => {
    setEditingIndex(null);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <form onSubmit={handleNewTodoSubmit}>
        <input
          type="text"
          placeholder="Add new todo..."
          value={newTodoText}
          onChange={handleNewTodoChange}
        />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => handleCheckboxChange(index)}
            />
            {editingIndex === index ? (
              <input
                type="text"
                value={todo.text}
                onChange={handleEditTodoChange}
                onBlur={handleEditTodoBlur}
                autoFocus
              />
            ) : (
              <span
                onClick={() => handleEditTodo(index)}
                className={todo.completed ? 'completed' : ''}
              >
                {todo.text}
              </span>
            )}
            <button onClick={() => handleDeleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

This implementation includes the ability for users to add, delete, mark as completed, and edit todo items. The code is well-organized and follows best practices for React development, such as using state and props to manage data and passing event handlers down to child components. The component is also reusable and easily customizable, with the ability to add additional features or functionality as desired.

Real-time features that could be implemented in a todo list app

Collaborative editing: Multiple users can edit the same todo list in real-time. Changes made by one user should be immediately visible to all other users viewing the list.
Live notifications: Users should receive live notifications when new todo items are added to the list, existing items are completed or deleted, or when other users make changes to the list.
Conflict resolution: In case multiple users attempt to edit the same todo item simultaneously, a conflict resolution mechanism should be in place to prevent data loss or corruption. For example, the last change made could take precedence, or the user could be prompted to resolve the conflict manually.
Offline support: Users should be able to view and edit the todo list even when they are offline. Changes made while offline should be synced with the server as soon as the user reconnects.
Mobile support: The todo list should be responsive and work well on mobile devices. Users should be able to add, edit, and complete items using touch gestures, and the list should adapt to the smaller screen size.

React todo list component is a versatile and useful tool for managing tasks and keeping track of work. By implementing real-time features like collaborative editing and live notifications, we can take the todo list to the next level and make it even more useful for teams and individuals. Whether you're a developer working on a team or an individual trying to stay organized, the React todo list component is a great tool to have in your toolbox.

Thanks for taking this JavaScript exercise!

If you have any questions or comments, feel free to reach out to me on Twitter(@rajeshtomjoe), or follow me for more updates.

And if you'd like to receive more exercise on JavaScript, be sure to subscribe to my blog.

React Todo List - JavaScript Exercise #5