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

Written by

javascriptfundamentals

in

In the ever-evolving world of web development, creating interactive and responsive user interfaces is paramount. One of the most common and essential features in many applications is a to-do list. This seemingly simple component, when built with React JS, can be a powerful tool for learning fundamental concepts and building more complex applications. In this tutorial, we will delve into building a dynamic, interactive to-do list using React JS, with the added functionality of local storage to persist the tasks even after the browser is closed. This means your tasks will be there when you return!

Why Build a To-Do List with React and Local Storage?

To-do lists are more than just a list of tasks; they’re a practical way to learn and apply core React concepts. Building this application allows you to master:

  • Component-based architecture: Learn how to break down your UI into reusable components.
  • State management: Understand how to manage and update data within your application.
  • Event handling: Grasp how to respond to user interactions like adding, deleting, and marking tasks as complete.
  • Local storage: Persist your data across sessions, a crucial skill for real-world applications.

By combining React’s component-based structure with local storage, we create a user-friendly experience that’s both efficient and persistent. This tutorial will provide a solid foundation for your React journey, equipping you with the skills to build more sophisticated applications.

Getting Started: Setting Up Your React Project

Before we dive into the code, you’ll need to set up your React development environment. If you already have one, feel free to skip to the next section. If not, don’t worry, it’s straightforward:

  1. Ensure you have Node.js and npm (Node Package Manager) installed. You can download them from nodejs.org.
  2. Create a new React app using Create React App: Open your terminal or command prompt and run the following command: 
    npx create-react-app todo-list-app

    This command creates a new directory called todo-list-app, sets up all the necessary files, and installs the required dependencies.

  3. Navigate into your project directory: 
    cd todo-list-app
  4. Start the development server: 
    npm start

    This will open your app in your default web browser, usually at http://localhost:3000.

Now you’re ready to start coding!

Building the To-Do List Components

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

  • App.js: The main component that will manage the overall state and render the other components.
  • TodoList.js: Renders the list of to-do items.
  • TodoItem.js: Renders an individual to-do item.
  • TodoForm.js: Handles adding new to-do items.

App.js: The Main Component

This component will manage the state of our to-do list, which will be an array of to-do items. Each item will be an object with properties like id, text, and completed. We’ll also handle the logic for adding, deleting, and updating tasks here.

Let’s start by modifying src/App.js:

import React, { useState, useEffect } from 'react';
import TodoList from './TodoList';
import TodoForm from './TodoForm';

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));
  }
 }, []);

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

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

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

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

 return (
  <div className="app-container">
  <h1>My To-Do List</h1>
  <TodoForm addTodo={addTodo} />
  <TodoList
  todos={todos}
  deleteTodo={deleteTodo}
  toggleComplete={toggleComplete}
  />
  </div>
 );
}

export default App;

Explanation:

  • Import statements: We import useState and useEffect from React, TodoList, and TodoForm components.
  • useState: The todos state variable holds an array of to-do items. It’s initialized to an empty array.
  • useEffect (Load from Local Storage): This useEffect hook runs when the component mounts (the empty dependency array []). It retrieves the to-do items from local storage using localStorage.getItem('todos'). If there are stored items, it parses them from JSON and updates the todos state.
  • useEffect (Save to Local Storage): This useEffect hook runs whenever the todos state changes ([todos] as a dependency). It converts the todos array to a JSON string using JSON.stringify() and saves it to local storage using localStorage.setItem('todos', JSON.stringify(todos)).
  • addTodo(text): This function adds a new to-do item to the todos array. It generates a unique ID using Date.now() and sets the completed property to false initially.
  • deleteTodo(id): This function removes a to-do item from the todos array based on its ID.
  • toggleComplete(id): This function toggles the completed status of a to-do item.
  • JSX: The component renders a heading, the TodoForm component (for adding new tasks), and the TodoList component (for displaying the tasks).

TodoForm.js: Adding New Tasks

This component will contain a form with an input field and a button to add new to-do items.

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('');

 function handleSubmit(e) {
  e.preventDefault();
  if (!value) return;
  addTodo(value);
  setValue('');
 }

 return (
  <form onSubmit={handleSubmit} className="todo-form">
  <input
  type="text"
  className="input"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Add a task..."
  />
  <button type="submit">Add</button>
  </form>
 );
}

export default TodoForm;

Explanation:

  • useState: The value state variable stores the text entered in the input field.
  • handleSubmit(e): This function is called when the form is submitted. It prevents the default form submission behavior (which would refresh the page), calls the addTodo function passed as a prop, and clears the input field.
  • JSX: The component renders a form with an input field and a 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

This component will iterate over the todos array and render a TodoItem component for each to-do item.

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

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

function TodoList({ todos, deleteTodo, toggleComplete }) {
 return (
  <ul className="todo-list">
  {todos.map((todo) => (
  <TodoItem
  key={todo.id}
  todo={todo}
  deleteTodo={deleteTodo}
  toggleComplete={toggleComplete}
  />
  ))}
  </ul>
 );
}

export default TodoList;

Explanation:

  • Props: The component receives todos (the array of to-do items), deleteTodo (a function to delete a to-do item), and toggleComplete (a function to toggle the completion status of a to-do item) as props.
  • map(): The map() function iterates over the todos array and renders a TodoItem component for each item. The key prop is essential for React to efficiently update the list.

TodoItem.js: Rendering a Single To-Do Item

This component will render a single to-do item, including its text, a checkbox to mark it as complete, and a button to delete it.

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

import React from 'react';

function TodoItem({ todo, deleteTodo, toggleComplete }) {
 return (
  <li className="todo-item">
  <input
  type="checkbox"
  checked={todo.completed}
  onChange={() => toggleComplete(todo.id)}
  />
  <span className={todo.completed ? 'completed' : ''}>{todo.text}</span>
  <button onClick={() => deleteTodo(todo.id)}>Delete</button>
  </li>
 );
}

export default TodoItem;

Explanation:

  • Props: The component receives todo (the to-do item object), deleteTodo (a function to delete the to-do item), and toggleComplete (a function to toggle the completion status).
  • JSX: The component renders a list item (<li>) with a checkbox, the to-do item’s text, and a delete button.
  • Checkbox: The checkbox’s checked attribute is bound to todo.completed. When the checkbox is checked or unchecked, the toggleComplete function is called.
  • Text: The to-do item’s text is displayed inside a <span> element. The className is conditionally set to 'completed' if the item is completed, allowing us to apply styling to completed tasks.
  • Delete Button: The delete button calls the deleteTodo function when clicked.

Adding Styles (Optional)

To make your to-do list look nicer, you can add some CSS styles. You can either add styles directly to your components using inline styles or create a separate CSS file. For this example, let’s create a src/App.css file and import it into src/App.js.

Create a new file named src/App.css and add the following code:

.app-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

h1 {
  text-align: center;
  color: #333;
}

.todo-form {
  margin-bottom: 20px;
  display: flex;
}

.input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
}

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

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

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

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

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

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

Then, import the CSS file in src/App.js:

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

function App() {
 // ... (rest of the App component code)
}

export default App;

Testing Your To-Do List

With all the components and styles in place, your to-do list is ready to be tested! Run npm start in your terminal if it’s not already running. You should see your to-do list in your browser. Try adding tasks, marking them as complete, deleting them, and refreshing the page to ensure the data persists in local storage.

Common Mistakes and How to Fix Them

As you build this to-do list, you might encounter some common issues. Here’s a guide to troubleshooting:

  • Tasks not saving to local storage:
    • Problem: Tasks disappear after refreshing the page.
    • Solution: Double-check that you’ve implemented the useEffect hooks correctly in App.js. Ensure that the second argument (the dependency array) of the useEffect hooks is correct. The first useEffect (loading from local storage) should have an empty dependency array ([]), and the second useEffect (saving to local storage) should depend on the todos state ([todos]).
    • Solution: Verify that you are correctly using JSON.stringify() when saving to local storage and JSON.parse() when retrieving from local storage.
  • Incorrectly updating state:
    • Problem: The UI doesn’t update when adding, deleting, or completing tasks.
    • Solution: Make sure you are using the setTodos() function to update the todos state. Directly modifying the todos array will not trigger a re-render.
    • Solution: When updating the todos array, use the spread operator (...) to create a new array. This tells React that the data has changed and needs to be re-rendered.
  • Key prop warnings:
    • Problem: You see warnings in the console about missing or duplicate keys.
    • Solution: Ensure that each item in your TodoList component has a unique key prop. In this example, we use todo.id, which should be unique.
  • Input field not clearing:
    • Problem: The input field doesn’t clear after adding a task.
    • Solution: In the TodoForm component, make sure you are calling setValue('') after adding a new task to clear the input field.

Key Takeaways and Summary

Congratulations! You’ve successfully built a dynamic to-do list with React and local storage. Here’s a quick recap of the key concepts we covered:

  • Component-based architecture: Breaking down the UI into reusable components (App, TodoList, TodoItem, TodoForm).
  • State management: Using the useState hook to manage the todos state.
  • Event handling: Responding to user interactions (adding, deleting, and completing tasks) using event handlers.
  • Local storage: Persisting data across sessions using localStorage.

By understanding these concepts, you’ve gained a solid foundation for building more complex React applications. You can extend this to-do list by adding features such as:

  • Editing tasks: Allow users to edit existing tasks.
  • Prioritization: Implement different priority levels for tasks.
  • Filtering and sorting: Add options to filter and sort tasks (e.g., by due date or priority).
  • User authentication: Implement user accounts to allow multiple users to manage their to-do lists.

FAQ

Here are some frequently asked questions about building a to-do list with React and local storage:

  1. Why use local storage? Local storage allows you to persist data in the user’s browser, so the tasks are not lost when the user closes the browser or refreshes the page.
  2. What are the alternatives to local storage? Other options for persisting data include cookies, session storage, and databases (for more complex applications).
  3. How can I deploy this to-do list? You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages.
  4. Can I use this code in a commercial project? Yes, this code is provided for educational purposes, and you are free to use it in your projects.
  5. How do I handle errors in local storage? You should wrap your localStorage operations in a try...catch block to handle potential errors. This can happen if the user’s browser has local storage disabled or if the storage limit is reached. 
    try {
  localStorage.setItem('todos', JSON.stringify(todos));
} catch (error) {
  console.error('Error saving to local storage:', error);
  // Handle the error (e.g., show an error message to the user)
}

This tutorial provides a solid starting point for building interactive web applications with React. The principles of component design, state management, and data persistence are crucial for web development, and the to-do list example offers a clear way to learn and practice these skills. By adding more features and experimenting with different approaches, you can further enhance your skills and create even more impressive applications. Keep exploring, keep building, and keep learning!

More posts