Create Simple React Todo App

React Todo App: In this tutorial, You will learn to create a simple Todo App using React js step by step. So, You should read all the given points carefully. So that you can easily integrate Todo functionality in your project

Using Todo Feature, you can easily list your day-to-day task, daily schedules & other tasks. So It will be very helpful to maintain quickly your daily routine with a single click.

If you use this feature in your website, then You can do the following things without reloading the page –

  • You can add your task by clicking the add button
  • You can also more & more tasks on the list according to your requirement
  • Even You can delete the created todo list by clicking the cross (x) button

react todo app

Simple Todo App in React Js

Now, I am going to start to develop a simple to-do list from the basic level so that you can easily understand its working concept.

Learn Also –

How to display images in react js

Create Charts in React Js

How to create a simple Todo App using jQuery

Now, Let’s implement the following steps one by one –

1. Create a React App with NPM

First of all, you have to create a react app with npm. If you have already created it then create the following folders & files in your react app

  • todo folder within the src folder
  • todoApp.js and todoList.js within the todo folder

You will get various files & folders while you create a react. But  I have shown you here only those folders & files are required to develop a to-do application.

   |   |__todoApp.js
   |   |__todoList.js

Now, before getting started its coding, you have to install bootstrap CDN by running the following command –

npm install bootstrap

After that, import the Bootstrap CDN by adding the following line of code in the App.js

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

For more information, you can learn How to use Bootstrap in React Js

2. Create Todo App Component

To create the Todo App component, You will have to implement the following points –

  • First of all, You have to create TodoApp class and import React from the react library
  • Import TodoList  from “./TodoList”. It will be explained in the next steps
  • Then define the following object properties within the constructor
    • inputData – This state property will hold the todo input value
    • todoItems – This state property will store todo items in an array formate
  • Also, defined the following arrow function –
    • changeTodoInput – This method will execute you start typing into the input field and will update the existing value.
    • addTodo – This method will execute while you click the add button and will update the todoItems
    • deleteTodo – This will execute while you click the cross (x) button and will remove items from the todoItems based on the passing index as an argument from this method.
  • Create a text type input field with the following attributes –
    • value={this.state.inputData}
    • onChange={this.changeTodoInput}
  • Also, Create a add button and call an event handler onClick={this.addTodo} within it
  • render <TodoList /> commponent and pass items={this.state.todoItems} and deleteTodo={this.deleteTodo} as props within it
  • At last. don’t forget to export TodoApp

File Name – todoApp.js

import React from "react";
import TodoList from "./TodoList";

class TodoApp extends React.Component {
  changeTodoInput = (event) =>{

  addTodo = (event) =>{
      let newTodoItems=[...this.state.todoItems,this.state.inputData];
      this.setState({todoItems:newTodoItems, inputData:""}) 

  deleteTodo =(index) =>{
    let todoItems=[...this.state.todoItems];
    let newTodoItems=todoItems.filter((value, key)=>{
       return index!==key
  return (
   <div className="container">
     <div className="row">
       <div className="col-sm-4">
         <h3 className="text-center">React Todo App</h3>
            <div className="input-group">
                <input type="text" placeholder="Enter Something" className="form-control" onChange={this.changeTodoInput} value={this.state.inputData}/>
                <div className="input-group-append">
                <span className="btn btn-success " onClick={this.addTodo}>Add</span>
                 <TodoList items={this.state.todoItems} deleteTodo={this.deleteTodo}/>


export default TodoApp;

3. Create Toto List Component

To create the Todo List component, you will have to implement the following points –

  • First of all, Create a TodoList class and import React from the react library
  • Display todo items in lists within <ul> tag by applying javascript map() method on this.props.items
  • Also, create a delete button with an attribute onClick={()=>{this.props.deleteTodo(index)}}
  • At, last, don’t forget to export TodoList

File Name – todoList.js

import React from "react";

class TodoList extends React.Component{
            <ul className="list-group list-group-flush">
      , index)=>{
               return (
               <React.Fragment key={index}>
               <li className="list-group-item bg-light d-flex justify-content-between">{value}
               <button className="btn text-danger badge" onClick={()=>{this.props.deleteTodo(index)}}>X</button>
export default TodoList;


4. Render Todo Component

  • You have to import TodoApp from the directory path “./Todo/TodoApp”
  • Then render <TodoApp /> with the App component

File Name – App.js

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import TodoApp from "./Todo/TodoApp";

class App extends React.Component {


  return (
    <TodoApp />

export default App;

5. Run React App

After completing the previous step, you will have to start the development server to run the react app by using the following command

npm start

Then you can test the React Todo application  yourself with the following URL