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

Written by

javascriptfundamentals

in

Tired of losing your to-do list every time you close your browser? Frustrated by the lack of persistence in your simple task managers? In this comprehensive tutorial, we’ll build an interactive, user-friendly to-do list application in React. But we won’t stop there. We’ll equip it with the power of local storage, ensuring your tasks stay put, even after a refresh or a browser restart. This project is perfect for beginners and intermediate developers looking to solidify their React skills while learning about state management, event handling, and the practical application of local storage.

Why Build a To-Do List with Local Storage?

To-do lists are a cornerstone of productivity. They help us organize our lives, prioritize tasks, and stay on track. However, a basic to-do list that doesn’t save your data is, frankly, not very useful. Imagine creating your list, only to have it vanish the moment you close the browser. This is where local storage comes in. Local storage allows us to save data directly in the user’s browser, providing a persistent and reliable way to store our to-do items.

This tutorial will not only teach you how to build a functional to-do list but also how to integrate local storage to make it truly useful. You’ll learn how to:

  • Create React components
  • Manage component state
  • Handle user input and events
  • Use local storage to save and retrieve data
  • Structure your React application for maintainability

Setting Up the Development Environment

Before we dive into the code, let’s set up our development environment. We’ll use Create React App to quickly scaffold our project. If you don’t have Node.js and npm (or yarn) installed, you’ll need to install them first. You can download them from the official Node.js website. Once you have Node.js installed, open your terminal and run the following command:

npx create-react-app todo-app-with-local-storage
cd todo-app-with-local-storage

This will create a new React app named “todo-app-with-local-storage” and navigate you into the project directory. Next, start the development server:

npm start

This command will start the development server, and your app should open automatically in your browser (usually at http://localhost:3000). Now, open the project in your favorite code editor (like VS Code, Sublime Text, or Atom), and let’s start coding.

Building the To-Do List Components

Our to-do list application will consist of a few key components:

  • App.js: The main component, responsible for rendering the entire application and managing the state of our to-do items.
  • TodoForm.js: A component for adding new to-do items.
  • TodoList.js: A component for displaying the list of to-do items.
  • TodoItem.js: A component for rendering each individual to-do item.

App.js: The Main Component

Let’s start by modifying the `src/App.js` file. First, we will import necessary components and define our initial state, which will hold our to-do items. Replace the existing code with the following:


import React, { useState, useEffect } from 'react';
import TodoForm from './TodoForm';
import TodoList from './TodoList';
import './App.css'; // Import your CSS file

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

  useEffect(() => {
    // Load todos from local storage when the component mounts
    const storedTodos = localStorage.getItem('todos');
    if (storedTodos) {
      setTodos(JSON.parse(storedTodos));
    }
  }, []); // Empty dependency array means this effect runs only once on mount

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

  const addTodo = (text) => {
    const newTodo = { id: Date.now(), text: text, completed: false };
    setTodos([...todos, newTodo]);
  };

  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>
  );
}

export default App;

Let’s break down this code:

  • Import Statements: We import `useState` and `useEffect` from React, as well as our other components (`TodoForm` and `TodoList`) and the CSS file.
  • State Initialization: `const [todos, setTodos] = useState([]);` initializes the `todos` state variable as an empty array. This array will hold our to-do objects.
  • useEffect for Loading from Local Storage: The first `useEffect` hook loads todos from local storage when the component mounts. It checks if there’s any data stored under the key ‘todos’. If there is, it parses the JSON string and updates the `todos` state. The empty dependency array `[]` ensures this effect runs only once, when the component initially renders.
  • useEffect for Saving to Local Storage: The second `useEffect` hook saves the `todos` array to local storage whenever the `todos` state changes. It uses `JSON.stringify()` to convert the array into a string before storing it. The dependency array `[todos]` ensures this effect runs whenever the `todos` state is updated.
  • addTodo Function: This function is responsible for adding new to-do items to the `todos` array. It creates a new to-do object with a unique ID (using `Date.now()`), the text provided by the user, and a default `completed` status of `false`. It then updates the `todos` state using the spread operator (`…`) to add the new item.
  • toggleComplete Function: This function toggles the `completed` status of a to-do item when the user clicks on it. It iterates through the `todos` array using `map()`. If the ID of the current to-do item matches the ID passed to the function, it creates a new object with the `completed` status flipped. Otherwise, it returns the original to-do item.
  • deleteTodo Function: This function removes a to-do item from the `todos` array. 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.
  • JSX Structure: The JSX structure renders the main UI, including the `TodoForm` component for adding tasks and the `TodoList` component for displaying them. It passes the necessary props (`addTodo`, `todos`, `toggleComplete`, and `deleteTodo`) to these child components.

TodoForm.js: Adding New Tasks

Create a new file named `src/TodoForm.js` and add the following code:


import React, { useState } from 'react';

function TodoForm({ addTodo }) {
  const [value, setValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!value) return; // Prevent adding empty tasks
    addTodo(value);
    setValue('');
  };

  return (
    
       setValue(e.target.value)}
      />
      <button type="submit">Add</button>
    
  );
}

export default TodoForm;

Here’s what this component does:

  • State for Input: `const [value, setValue] = useState(”);` initializes a state variable `value` to hold the text entered by the user in the input field.
  • handleSubmit Function: This function is called when the form is submitted. It prevents the default form submission behavior (which would refresh the page). It then calls the `addTodo` function (passed as a prop from `App.js`) with the current value and clears the input field.
  • JSX Structure: The JSX renders a form with an input field and a submit button. The `onChange` event handler updates the `value` state as the user types, and the `onSubmit` event handler calls the `handleSubmit` function.

TodoList.js: Displaying the To-Do Items

Create a new file named `src/TodoList.js` and add the following code:


import React from 'react';
import TodoItem from './TodoItem';

function TodoList({ todos, toggleComplete, deleteTodo }) {
  return (
    <ul>
      {todos.map((todo) => (
        
      ))}
    </ul>
  );
}

export default TodoList;

This component is responsible for displaying the list of to-do items. It receives the `todos` array, `toggleComplete`, and `deleteTodo` functions as props. It iterates over the `todos` array using the `map()` method, rendering a `TodoItem` component for each to-do item. The `key` prop is essential for React to efficiently update the list. The `TodoItem` component is where we will handle the display of each individual to-do item.

TodoItem.js: Rendering Individual To-Do Items

Create a new file named `src/TodoItem.js` and add the following code:


import React from 'react';

function TodoItem({ todo, toggleComplete, deleteTodo }) {
  return (
    <li>
       toggleComplete(todo.id)}
      />
      <span>{todo.text}</span>
      <button> deleteTodo(todo.id)}>Delete</button>
    </li>
  );
}

export default TodoItem;

This component renders a single to-do item. It receives the `todo` object, `toggleComplete`, and `deleteTodo` functions as props. It renders a checkbox, the to-do item’s text, and a delete button. The `onChange` event handler on the checkbox calls the `toggleComplete` function when the checkbox is clicked. The delete button calls the `deleteTodo` function when clicked. The `span` element has a conditional class to apply a “completed” style if the task is marked as complete.

Adding Styles (CSS)

To make our to-do list look presentable, let’s add some basic CSS. Create a file named `src/App.css` and add the following styles:


.app {
  font-family: sans-serif;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

h1 {
  text-align: center;
}

form {
  margin-bottom: 20px;
}

.input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
  width: 70%;
}

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

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

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

.todo-item input[type="checkbox"] {
  margin-right: 10px;
}

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

This CSS provides basic styling for the overall layout, the form, the input field, the button, and the to-do items. It also includes a style for completed tasks (strikethrough and grayed-out text).

Running and Testing the Application

Save all the files and go back to your browser. Your to-do list application should now be fully functional. You can add new tasks, mark them as complete, and delete them. Try closing and reopening your browser or refreshing the page. Your tasks should persist thanks to local storage.

Common Mistakes and How to Fix Them

1. Not Importing Components Correctly

A common mistake is forgetting to import components. Make sure you import all necessary components (like `TodoForm` and `TodoList`) into the component where you’re using them. Also, double-check that the file paths in your `import` statements are correct.

Fix: Carefully review your import statements and ensure that the file paths are accurate. For example:

import TodoForm from './TodoForm'; // Correct path

2. Not Using the `key` Prop in Lists

When rendering lists of items in React (like our to-do items), you must provide a unique `key` prop to each item. This helps React efficiently update the list. If you don’t provide a key, React will issue a warning in the console.

Fix: In `TodoList.js`, make sure each `TodoItem` has a unique `key` prop, such as the `todo.id`:


{todos.map((todo) => (
  
))}

3. Incorrect State Updates

Incorrectly updating state can lead to unexpected behavior. Remember that you should not directly modify the state. Instead, you should use the state update function (e.g., `setTodos`) and provide a new value for the state. Also, be mindful of immutability – when updating arrays or objects, create new instances rather than modifying the original ones.

Fix: Use the correct methods to update state. For example, when adding a new to-do item, use the spread operator (`…`) to create a new array with the new item:


setTodos([...todos, newTodo]); // Correct way to add a new item

4. Local Storage Issues

A common issue is not correctly stringifying the data before storing it in local storage or not parsing it back into a JavaScript object when retrieving it. Also, make sure to handle potential errors when accessing local storage.

Fix: Use `JSON.stringify()` when saving to local storage and `JSON.parse()` when retrieving from local storage.


localStorage.setItem('todos', JSON.stringify(todos)); // Correct for saving
const storedTodos = localStorage.getItem('todos');
if (storedTodos) {
  setTodos(JSON.parse(storedTodos)); // Correct for retrieving
}

5. Missing Event Handlers

Make sure you correctly wire up your event handlers (e.g., `onChange`, `onSubmit`, `onClick`) to the appropriate elements. Also, ensure that the event handlers are correctly bound to the component functions.

Fix: Double-check your event handler bindings, such as `onChange={(e) => setValue(e.target.value)}` and ensure that the correct functions are being called when events occur.

Summary / Key Takeaways

In this tutorial, we built a fully functional to-do list application in React that leverages the power of local storage to persist data. We covered:

  • Setting up a React project using Create React App.
  • Creating reusable components for different parts of the application.
  • Managing state with `useState` and using `useEffect` for side effects.
  • Handling user input and events.
  • Using local storage to store and retrieve data, making our to-do list persistent.
  • Adding basic styling with CSS.

This project provides a solid foundation for understanding React and working with local storage. You can expand upon this by adding features such as:

  • Editing existing tasks.
  • Prioritizing tasks.
  • Adding due dates.
  • Implementing more advanced styling and UI elements.

FAQ

1. Why use local storage instead of a database for this project?

For a simple to-do list, local storage is a good choice because it’s easy to implement and doesn’t require a backend server or database setup. It’s ideal for storing small amounts of data directly in the user’s browser. Databases are generally used when you need to store and manage larger amounts of data, support multiple users, or require more complex data relationships.

2. How does local storage work?

Local storage is a web API that allows you to store data as key-value pairs in the user’s browser. The data is stored persistently, meaning it remains even after the browser is closed and reopened. The data is specific to the origin (domain) of the website. Each browser has its own local storage, so data stored in one browser won’t be accessible from another.

3. What are the limitations of local storage?

Local storage has some limitations. It’s limited to a relatively small amount of storage (typically around 5-10MB, depending on the browser). It’s also synchronous, meaning that reading and writing to local storage can block the main thread, potentially affecting performance if you’re storing a large amount of data. Local storage is also only accessible from the same origin (domain) as the website.

4. How can I clear the data stored in local storage?

You can clear the data stored in local storage in a few ways:

  • From your application: You can use the `localStorage.removeItem(‘todos’);` or `localStorage.clear();` methods in your JavaScript code.
  • From the browser’s developer tools: Open the developer tools in your browser (usually by pressing F12 or right-clicking and selecting “Inspect”). Go to the “Application” or “Storage” tab and find the “Local Storage” section. You can then clear the data for your website.
  • From the browser settings: You can clear local storage data through the browser’s settings or by clearing your browsing data.

5. Can I use local storage to store sensitive data?

No, you should not store sensitive data (e.g., passwords, credit card numbers) in local storage. Local storage is not encrypted, and the data can be accessed by any JavaScript code running on the same origin (domain). It is generally not considered secure for storing sensitive information. Consider using more secure storage mechanisms like cookies with the `HttpOnly` flag or a backend database for sensitive data.

Building a to-do list with React and local storage is more than just a coding exercise; it’s a gateway to understanding the fundamentals of modern web development. You’ve learned how to manage state, handle user interactions, and make data persistent. As you experiment with these concepts, remember that the true power of React lies in its flexibility and reusability. By breaking down complex problems into smaller, manageable components, you can create robust and maintainable applications. The ability to save and retrieve user data is crucial for creating user-friendly and engaging web applications. Embrace the learning process, and don’t be afraid to experiment and build upon what you’ve learned. The skills you’ve developed here will serve you well as you continue your journey in web development. Keep coding, keep learning, and keep building!

More posts