Build a Dynamic React Component for a Simple Interactive To-Do List with Local Storage

Written by

javascriptfundamentals

in

Tired of scattered notes and forgotten tasks? In the fast-paced world of web development, managing tasks efficiently is paramount. A well-designed to-do list application can be a game-changer, helping you stay organized and productive. This tutorial will guide you through building a dynamic, interactive to-do list component using ReactJS. We’ll go beyond the basics, incorporating local storage to persist your tasks even after the browser is closed. This means your to-do list will always be there, ready to help you conquer your day.

Why Build a To-Do List with React?

React’s component-based architecture makes it ideal for building interactive user interfaces. React allows you to create reusable components, manage state efficiently, and update the UI dynamically. A to-do list is a perfect project to learn and practice these core React concepts. Furthermore, building a to-do list offers practical experience with:

  • State Management: Understanding how to manage and update the state of your tasks.
  • Event Handling: Handling user interactions like adding, deleting, and marking tasks as complete.
  • Component Composition: Breaking down the application into smaller, manageable components.
  • Local Storage: Persisting data so it survives browser refreshes and closures.

Prerequisites

Before we dive in, ensure you have the following:

  • Basic understanding of HTML, CSS, and JavaScript: You should be familiar with the fundamentals of web development.
  • Node.js and npm (or yarn) installed: You’ll need these to set up your React project.
  • A code editor: VS Code, Sublime Text, or any editor of your choice.

Setting Up Your React Project

Let’s get started by creating a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app todo-list-app
cd todo-list-app

This command creates a new React project named “todo-list-app”. The `cd` command navigates you into the project directory.

Project Structure

Your project directory will look like this:


todo-list-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
└── README.md

The `src` folder is where we’ll be writing our React code. The `App.js` file is the main component of our application.

Building the To-Do List Component

Now, let’s create the `ToDoList` component. First, let’s clear out the unnecessary code from `App.js` and `App.css`. Open `src/App.js` and replace the contents with the following:

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  useEffect(() => {
    // Load todos from local storage when the component mounts
    const storedTodos = JSON.parse(localStorage.getItem('todos')) || [];
    setTodos(storedTodos);
  }, []);

  useEffect(() => {
    // Save todos to local storage whenever todos change
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  const addTodo = () => {
    if (input.trim() !== '') {
      setTodos([...todos, { id: Date.now(), text: input, completed: false }]);
      setInput('');
    }
  };

  const toggleComplete = (id) => {
    setTodos(
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div>
      <h1>To-Do List</h1>
      <div>
         setInput(e.target.value)}
          placeholder="Add a task..."
        />
        <button>Add</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li>
            <span> toggleComplete(todo.id)} className="todo-text">{todo.text}</span>
            <button> deleteTodo(todo.id)} className="delete-button">Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

And now, let’s style our application by replacing the content of `src/App.css` with the following:


.App {
  font-family: sans-serif;
  text-align: center;
  padding: 20px;
}

h1 {
  color: #333;
}

.input-container {
  margin-bottom: 20px;
}

input[type="text"] {
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #3e8e41;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-text {
  flex-grow: 1;
  text-align: left;
  cursor: pointer;
}

.completed {
  text-decoration: line-through;
  color: #888;
}

.delete-button {
  background-color: #f44336;
  margin-left: 10px;
}

.delete-button:hover {
  background-color: #da190b;
}

Let’s break down the code step-by-step.

Import Statements and Initial State

We start by importing the necessary modules from React and our `App.css` file.

import React, { useState, useEffect } from 'react';
import './App.css';

We then initialize the state using the `useState` hook:

const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');

Here, `todos` is an array that holds our to-do items, and `input` stores the text entered in the input field. `setTodos` and `setInput` are functions used to update their respective states.

Loading and Saving with Local Storage

We use the `useEffect` hook to load and save our to-do items to local storage. The `useEffect` hook takes two arguments: a function that performs the side effect, and an array of dependencies. When the dependency array changes, the effect runs again.

Loading from Local Storage:

useEffect(() => {
  const storedTodos = JSON.parse(localStorage.getItem('todos')) || [];
  setTodos(storedTodos);
}, []);

This `useEffect` hook runs only once, when the component mounts (because the dependency array `[]` is empty). It retrieves the `todos` from local storage using `localStorage.getItem(‘todos’)`. The retrieved value is parsed using `JSON.parse()`. If there are no todos, it defaults to an empty array. Finally, `setTodos` updates the `todos` state with the retrieved or default value.

Saving to Local Storage:

useEffect(() => {
  localStorage.setItem('todos', JSON.stringify(todos));
}, [todos]);

This `useEffect` hook runs whenever the `todos` state changes (because the dependency array includes `todos`). It converts the `todos` array to a JSON string using `JSON.stringify()` and stores it in local storage using `localStorage.setItem(‘todos’, …)`.

Adding a To-Do Item

The `addTodo` function handles the addition of new to-do items:

const addTodo = () => {
  if (input.trim() !== '') {
    setTodos([...todos, { id: Date.now(), text: input, completed: false }]);
    setInput('');
  }
};

It checks if the input is not empty, creates a new to-do object with a unique ID (using `Date.now()`), the input text, and a `completed` status set to `false`. It then updates the `todos` state by adding the new to-do item using the spread operator (`…`). Finally, it clears the input field.

Toggling Completion Status

The `toggleComplete` function toggles the completion status of a to-do item:

const toggleComplete = (id) => {
  setTodos(
    todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    )
  );
};

It iterates over the `todos` array using the `map` method. If the ID of the current to-do item matches the ID passed to the function, it creates a new object with the `completed` property toggled. Otherwise, it returns the original to-do item. The `setTodos` function then updates the state with the modified array.

Deleting a To-Do Item

The `deleteTodo` function removes a to-do item:

const deleteTodo = (id) => {
  setTodos(todos.filter(todo => todo.id !== id));
};

It uses the `filter` method to create a new array containing only the to-do items whose IDs do not match the ID passed to the function. The `setTodos` function then updates the state with the filtered array, effectively removing the item.

Rendering the UI

The `return` statement renders the UI:


  return (
    <div>
      <h1>To-Do List</h1>
      <div>
         setInput(e.target.value)}
          placeholder="Add a task..."
        />
        <button>Add</button>
      </div>
      <ul>
        {todos.map(todo => (
          <li>
            <span> toggleComplete(todo.id)} className="todo-text">{todo.text}</span>
            <button> deleteTodo(todo.id)} className="delete-button">Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );

It displays a heading, an input field and an “Add” button, and a list of to-do items. The `map` method is used to iterate over the `todos` array and render each to-do item as a list item. The `className` attribute is conditionally set to “completed” if the to-do item is marked as complete. Clicking the to-do item text toggles its completion status, and clicking the “Delete” button removes the item.

Running Your Application

To run your application, execute the following command in your terminal:

npm start

This will start the development server, and your to-do list application will be accessible in your web browser, typically at `http://localhost:3000`.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Not handling empty input: Users might try to add empty tasks. Always validate user input to prevent this.
  • Incorrectly using the spread operator: The spread operator (`…`) is crucial for updating the state correctly. Make sure you understand how to use it to create new arrays and objects without mutating the original state.
  • Forgetting to save to local storage: If you don’t save the to-do items to local storage, they will be lost when the page is refreshed. Make sure to use `useEffect` to save and load the data.
  • Not providing a unique key to list items: React needs unique keys for each item in a list to efficiently update the UI. Use the `id` of each to-do item as the key.
  • Mutating state directly: Never directly modify the `todos` array. Always create a new array using methods like `map`, `filter`, or the spread operator.

Enhancements and Further Development

This is a basic to-do list. Here are some ideas for enhancements:

  • Adding Edit Functionality: Allow users to edit existing tasks.
  • Adding Due Dates: Incorporate due dates for each task.
  • Implementing Filtering: Allow filtering tasks by status (e.g., all, active, completed).
  • Using a CSS framework: Integrate a framework like Bootstrap or Material-UI for a more polished UI.
  • Adding Drag and Drop: Implement drag-and-drop functionality to reorder tasks.

Key Takeaways

You’ve successfully built a dynamic to-do list application using React, incorporating local storage to persist data. You’ve learned how to manage state, handle user events, and interact with local storage. This project provides a solid foundation for understanding fundamental React concepts and building more complex applications. By following the steps outlined in this tutorial, you’ve gained practical experience with essential React features and learned how to create a functional and user-friendly to-do list application.

FAQ

Q: How do I clear the local storage?

A: You can clear the local storage for your application by opening your browser’s developer tools (usually by pressing F12), going to the “Application” tab, selecting “Local Storage” under “Storage,” and then deleting the “todos” key-value pair.

Q: Why am I not seeing my tasks after refreshing the page?

A: Double-check that you’ve correctly implemented the `useEffect` hooks to load and save the to-do items to local storage. Make sure the dependencies arrays are correctly set.

Q: How can I style the to-do list differently?

A: You can customize the appearance of the to-do list by modifying the CSS in the `App.css` file. Experiment with different colors, fonts, and layouts to achieve your desired look.

Q: How can I deploy this application?

A: You can deploy your application to a platform like Netlify or Vercel. These platforms provide free hosting and automatic deployment from your Git repository.

The journey of building this to-do list app not only helps in organizing tasks but also solidifies your grasp of React’s core principles. Remember that consistent practice and experimentation are key to mastering any technology. Continue to explore, build, and refine your skills, and you’ll find yourself creating increasingly sophisticated and engaging web applications. The skills you’ve acquired here will serve as a strong foundation for your future projects, opening doors to more complex and rewarding development endeavors. Embrace the challenges, learn from your mistakes, and always keep creating.

More posts