Build a React JS Interactive Simple Interactive Component: A Basic To-Do List with Local Storage

Written by

javascriptfundamentals

in

In the world of web development, managing tasks efficiently is a fundamental need. Whether it’s organizing personal chores, project deadlines, or collaborative team efforts, a well-designed to-do list is an invaluable tool. Imagine having a digital space where you can jot down your tasks, mark them as completed, and have them persist even when you close your browser. This is precisely what we’ll build in this tutorial: a basic, yet functional, to-do list application using React JS. This project will not only introduce you to the core concepts of React but also equip you with the knowledge to handle user input, manage state, and leverage local storage for data persistence.

Why Build a To-Do List?

Creating a to-do list application offers several advantages, especially for developers learning React. It provides a practical context for understanding key React concepts, including:

  • Component-based architecture: Learn how to break down the UI into reusable components.
  • State management: Understand how to store and update data within your application.
  • Event handling: Grasp how to respond to user interactions like button clicks and form submissions.
  • Conditional rendering: Discover how to display different content based on certain conditions.
  • Local storage: Get hands-on experience with saving and retrieving data in the user’s browser.

Moreover, building a to-do list is a great way to solidify your understanding of these concepts. You’ll gain practical experience that can be applied to more complex projects in the future.

Project Setup and Prerequisites

Before we dive into the code, let’s ensure you have the necessary tools and environment set up:

  1. Node.js and npm: Make sure you have Node.js and npm (Node Package Manager) installed on your system. You can download them from https://nodejs.org/.
  2. Create React App: We’ll use Create React App to quickly set up our project. Open your terminal and run the following command to create a new React app:

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

This command creates a new directory named “todo-list-app” with all the necessary files and dependencies. The `cd todo-list-app` command navigates into the project directory.

  1. Text Editor or IDE: Choose your preferred code editor or IDE (e.g., VS Code, Sublime Text, Atom) to write and edit your code.

Component Structure

Our to-do list application will be composed of several components. Breaking down the UI into components makes the code more organized, maintainable, and reusable. Here’s the basic structure we’ll follow:

  • App.js (or App.jsx): The main component that serves as the entry point of our application. It will manage the overall state of the to-do list and render other components.
  • TodoList.js (or TodoList.jsx): This component will be responsible for displaying the list of to-do items.
  • TodoItem.js (or TodoItem.jsx): Each individual to-do item will be rendered by this component.
  • TodoForm.js (or TodoForm.jsx): This component will handle the form for adding new to-do items.

Step-by-Step Implementation

1. Setting up the App Component (App.js/jsx)

Let’s start by modifying the `App.js` (or `App.jsx`) file. This is where we’ll define the initial state of our to-do list and render the other components. Open `src/App.js` and replace the existing code with the following:

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 = JSON.parse(localStorage.getItem('todos')) || [];
    setTodos(storedTodos);
  }, []);

  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 className="container">
      <h1>To-Do List</h1>
      <TodoForm addTodo={addTodo} />
      <TodoList
        todos={todos}
        toggleComplete={toggleComplete}
        deleteTodo={deleteTodo}
      />
    </div>
  );
}

export default App;

Let’s break down this code:

  • Import Statements: We import `useState` and `useEffect` from React, as well as the `TodoList` and `TodoForm` components that we’ll create later.
  • State Initialization: `const [todos, setTodos] = useState([]);` initializes the `todos` state variable as an empty array. This variable will hold our to-do items.
  • useEffect for Local Storage (Load): The first `useEffect` hook runs when the component mounts (i.e., when it’s first rendered). It attempts to retrieve todos from local storage using `localStorage.getItem(‘todos’)`. If there are any todos stored, it parses the JSON data and updates the `todos` state. If no todos are found, it initializes the `todos` state with an empty array.
  • useEffect for Local Storage (Save): The second `useEffect` hook runs whenever the `todos` state changes. It converts the `todos` array to a JSON string using `JSON.stringify()` and saves it to local storage using `localStorage.setItem(‘todos’)`. The dependency array `[todos]` ensures that this effect runs only when the `todos` state changes, preventing unnecessary updates.
  • 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 provided text, and a `completed` status set to `false`. Then, it updates the `todos` state by appending the new to-do item using the spread operator (`…`).
  • toggleComplete Function: This function toggles the `completed` status of a to-do item. It maps over the `todos` array, and if the ID of a to-do item matches the provided ID, it updates the `completed` property to its opposite value. Otherwise, it returns the original to-do item.
  • deleteTodo Function: This function removes a to-do item from the `todos` array. It filters the `todos` array, keeping only the to-do items whose IDs do not match the provided ID.
  • JSX Structure: The JSX structure renders a heading, the `TodoForm` component (which we’ll create next), and the `TodoList` component, passing the `todos`, `toggleComplete`, and `deleteTodo` functions as props.

2. Creating the TodoList Component (TodoList.js/jsx)

The `TodoList` component is responsible for displaying the list of to-do items. Create a new file named `TodoList.js` (or `TodoList.jsx`) in the `src` directory and add the following code:

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

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

export default TodoList;

Here’s what this component does:

  • Import Statement: Imports the `TodoItem` component, which we’ll define next.
  • Props: Receives `todos`, `toggleComplete`, and `deleteTodo` as props from the parent `App` component.
  • Mapping Todos: Uses the `map` method to iterate over the `todos` array. For each to-do item, it renders a `TodoItem` component, passing the `todo`, `toggleComplete`, and `deleteTodo` props to it.
  • Key Prop: The `key` prop is crucial for React to efficiently update the list. It should be a unique identifier for each item. In this case, we use `todo.id`.

3. Creating the TodoItem Component (TodoItem.js/jsx)

The `TodoItem` component renders each individual to-do item. Create a new file named `TodoItem.js` (or `TodoItem.jsx`) in the `src` directory and add the following code:

import React from 'react';

function TodoItem({ todo, toggleComplete, deleteTodo }) {
  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;

This component:

  • Props: Receives `todo`, `toggleComplete`, and `deleteTodo` as props.
  • Checkbox Input: Renders a checkbox input. The `checked` attribute is bound to `todo.completed`, and the `onChange` event calls the `toggleComplete` function, passing the `todo.id`.
  • Text Span: Displays the to-do item’s text (`todo.text`). The `className` is conditionally set to “completed” if `todo.completed` is true, allowing us to style completed tasks differently (e.g., strike-through).
  • Delete Button: Renders a button. The `onClick` event calls the `deleteTodo` function, passing the `todo.id`.

4. Creating the TodoForm Component (TodoForm.js/jsx)

The `TodoForm` component provides the input field and button for adding new to-do items. Create a new file named `TodoForm.js` (or `TodoForm.jsx`) in the `src` directory and add the following code:

import React, { useState } from 'react';

function TodoForm({ addTodo }) {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim()) {
      addTodo(text.trim());
      setText('');
    }
  };

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

export default TodoForm;

This component:

  • State: Uses the `useState` hook to manage the input field’s value (`text`).
  • handleSubmit Function: This function is called when the form is submitted. It prevents the default form submission behavior (page reload) using `e.preventDefault()`. If the input `text` is not empty (after trimming whitespace), it calls the `addTodo` function (passed as a prop) with the trimmed input text and resets the input field to an empty string.
  • Form and Input: Renders a form with an input field and a submit button. The `value` of the input field is bound to the `text` state, and the `onChange` event updates the `text` state as the user types.

5. Styling (Optional but Recommended)

To make our to-do list visually appealing, let’s add some basic styling. Open `src/App.css` and add the following CSS rules:

.container {
  width: 80%;
  margin: 20px auto;
  font-family: sans-serif;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

h1 {
  text-align: center;
}

form {
  margin-bottom: 20px;
}

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

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

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

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

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

These styles provide a basic layout, input field styling, button styling, and strike-through effect for completed tasks.

6. Import the CSS

Make sure to import the CSS file in your `App.js` (or `App.jsx`) file:

import './App.css'; // Add this line at the top of App.js

7. Running the Application

Finally, start your React application by running the following command in your terminal:

npm start

This will start the development server, and your to-do list application should open in your default web browser at `http://localhost:3000/` (or a similar address). You should now be able to add tasks, mark them as completed, delete them, and have them persist even after refreshing the page or closing the browser.

Common Mistakes and How to Fix Them

As you build your to-do list, you might encounter some common issues. Here are a few and how to resolve them:

  • Incorrect State Updates: Make sure you’re updating the state correctly using the `setTodos` function and the spread operator (`…`) to avoid unexpected behavior. Incorrect state updates can lead to the UI not reflecting the changes.
  • Missing Keys in Lists: When rendering lists of items (like the to-do items), always provide a unique `key` prop to each item. This helps React efficiently update the list. Without keys, React might re-render the entire list unnecessarily.
  • Not Preventing Default Form Submission: In the `TodoForm` component, remember to call `e.preventDefault()` in the `handleSubmit` function to prevent the page from reloading when the form is submitted.
  • Incorrectly Using Local Storage: Ensure you’re using `JSON.stringify()` to save data to local storage and `JSON.parse()` to retrieve it. Also, remember to handle cases where there is no data in local storage (e.g., the first time the app is used).
  • Typographical Errors: Double-check your code for typos, especially in component names, prop names, and variable names. These can lead to errors that are difficult to debug.

Summary / Key Takeaways

In this tutorial, we’ve walked through the process of building a basic to-do list application using React JS. You’ve learned how to structure your application into components, manage state using the `useState` hook, handle user input, respond to events, and use local storage to persist data. By breaking down the project into smaller, manageable parts, we were able to create a functional and interactive application. The use of React’s component-based architecture and state management makes the application maintainable and scalable. The integration of local storage ensures that the user’s data is preserved across sessions. You’ve also gained hands-on experience with key React concepts, which will be invaluable as you tackle more complex projects. This to-do list application serves as a solid foundation for understanding React and building more sophisticated web applications. Remember to practice and experiment with the code, and don’t hesitate to explore additional features, such as adding due dates, priorities, or categories to expand its functionality. The skills you’ve acquired here will empower you to create a wide range of interactive and engaging web experiences. Building projects like this is the best way to solidify your understanding and gain confidence in your React development skills. Keep exploring, keep building, and enjoy the journey of becoming a proficient React developer.

FAQ

Q: How can I add a feature to edit the to-do items?

A: You can add an edit feature by adding an edit button next to each to-do item. When the edit button is clicked, you can display an input field pre-filled with the current to-do item’s text. Allow the user to edit the text and save the changes. You will need to manage the edit state and update the to-do item in the `todos` array in your `App` component.

Q: How can I implement filtering (e.g., show only completed or incomplete tasks)?

A: You can add filter options (e.g., “All”, “Active”, “Completed”) to your app. Create a state variable to hold the selected filter. In your `TodoList` component, filter the `todos` array based on the selected filter before rendering the items. You can use the `filter` method on the `todos` array to achieve this.

Q: How can I deploy this to-do list online?

A: You can deploy your React app to various platforms like Netlify, Vercel, or GitHub Pages. These platforms provide simple deployment processes. You’ll typically need to build your React app using `npm run build` and then deploy the contents of the `build` directory to the platform of your choice.

Q: What if the local storage data gets corrupted?

A: Local storage data can sometimes become corrupted. You can add error handling to gracefully manage this. For example, if `JSON.parse()` fails when loading data, you can catch the error and initialize the `todos` state with an empty array or provide a user-friendly error message. You could also add a button to reset the local storage in case the user encounters issues.

This is just the beginning. The concepts and techniques demonstrated here can be applied to a wide variety of web development projects. Experiment with different features, explore advanced React concepts, and most importantly, keep practicing. Your journey into the world of React development has just begun, and the possibilities are endless.

More posts