How to Build a To-Do List App with React

In this tutorial, we’ll walk you through building a fully functional to-do list app with React. You’ll learn how to create a new to-do item, edit an existing item, and delete an item. Our tutorial includes step-by-step instructions and sample code that you can follow along with, making it perfect for beginners and experienced developers alike. By the end of this tutorial, you’ll have a fully functional to-do list app that you can use to keep track of your daily tasks!

Are you tired of jotting down your to-do list on a scrap piece of paper or in a text file? It’s time to move on from the old-school method and build a to-do list app with React. In this tutorial, we’ll walk you through building a fully functional to-do list app with update and delete functionality.

To get started, we need to set up our development environment. Make sure you have Node.js and npm installed on your machine. Create a new React project by running the following command:

npx create-react-app todo-list-app

Once the project is set up, open the App.js file and remove the existing code. We’ll start by creating a TodoList component that will hold our to-do list items. In the TodoList component, we’ll create a state variable to hold our list of to-do items:

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  
  return (
    <div>
      <h1>To-Do List</h1>
      ...
    </div>
  );
}

export default TodoList;

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  
  return (
    <div>
      <h1>To-Do List</h1>
      ...
    </div>
  );
}

export default TodoList;

Next, we’ll create a form that allows users to add new to-do items to the list

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleFormSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim() === '') return;
    setTodos([...todos, inputValue.trim()]);
    setInputValue('');
  };
  
  return (
    <div>
      <h1>To-Do List</h1>
      <form onSubmit={handleFormSubmit}>
        <input type="text" value={inputValue} onChange={handleInputChange} />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;