How to Create a To Do List App Using React?

In this blog, I will explain How to Create a To Do List App Using React.


The To-Do List App is a simple and interactive web application built using React.js, a popular JavaScript library for building user interfaces. This app provides users with a straightforward platform to manage their tasks, allowing them to add new to-do items, mark tasks as completed, and delete tasks they’ve accomplished. The application is designed with a clean and intuitive user interface, offering a seamless experience for organizing and tracking daily activities. By utilizing the principles of React.js, the To-Do List App demonstrates the power of component-based architecture and state management in creating dynamic and responsive user interfaces. Users can easily engage with their to-do list, making it a practical and accessible tool for maintaining productivity and staying organized. Whether for personal or professional use, this To-Do List App serves as an excellent starting point for those looking to explore React.js and its capabilities.

Requirements of How to Create a To Do List App Using React

  1. The app should display a list of to-do items.
  2. Further, users should be able to add new to-do items.
  3. Also, users should be able to mark a to-do item as completed.
  4. Finally, users should be able to delete a to-do item.


  1. Set up a new React.js project using Create React App or your preferred method.
  2. Create a component for the To-Do List (TodoList) that will render the list of to-do items.
  3. Further, create a component for individual To-Do items (TodoItem). Each item should display its text and have buttons to mark it as completed and delete it.
  4. Then, create a component for adding new to-do items (AddTodo). This component should have an input field and a button to add a new to-do item to the list.
  5. Manage the state of the to-do list in a parent component (App). Pass down necessary props to child components.
  6. Implement functionality to add new to-do items, mark items as completed, and delete items.
  7. Style your components to make the to-do list visually appealing.

Set up a new React App

Use Create React App to set up a new React project. Open your terminal and run.

npx create-react-app react-todo-app
cd react-todo-app
Creating a React App
Creating a React App

Create Components

After that, create the necessary components (App.js, TodoList.js, TodoItem.js, AddTodo.js) in the src folder.

Example Component Structure


// src/App.js
import React, { useState } from 'react';
import TodoList from './TodoList';
import AddTodo from './AddTodo';

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

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

  const toggleTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;

  const deleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);

  return (
      <h1>To-Do List</h1>
      <AddTodo addTodo={addTodo} />
      <TodoList todos={todos} toggleTodo={toggleTodo} deleteTodo={deleteTodo} />

export default App;


// src/TodoList.js
import React from 'react';
import TodoItem from './TodoItem';

function TodoList({ todos, toggleTodo, deleteTodo }) {
  return (
      {, index) => (

export default TodoList;


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

function TodoItem({ index, todo, toggleTodo, deleteTodo }) {
  return (
      <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
      <button onClick={() => toggleTodo(index)}>Complete</button>
      <button onClick={() => deleteTodo(index)}>Delete</button>

export default TodoItem;


// src/AddTodo.js
import React, { useState } from 'react';

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

  const handleAddTodo = () => {
    if (text.trim() !== '') {

  return (
        onChange={(e) => setText(}
        placeholder="Add a new to-do"
      <button onClick={handleAddTodo}>Add</button>

export default AddTodo;

Run the App

Back in the terminal, run the following command to start your React app:

npm start
Running the To Do List App
Running the To Do List App


React To Do List App
React To Do List App
Adding Items in the To Do List
Adding Items in the To Do List
Mark Items as Complete
Mark Items as Complete
Delete Items from the List
Delete Items from the List

Further Reading

Introduction to React JS

How to Create Class Components in React?

Examples of Array Functions in PHP

How to Create Functional Components in React?

Exploring PHP Arrays: Tips and Tricks

Basic Programs in PHP

Registration Form Using PDO in PHP

Inserting Information from Multiple CheckBox Selection in a Database Table in PHP

PHP Projects for Undergraduate Students

Architectural Constraints of REST API

REST API Concepts

Creating a Classified Ads Application in PHP

How to Create a Bar Chart in ReactJS?


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *