Open In App
Related Articles

Create ToDo App using ReactJS

Improve Article
Save Article
Like Article

In this article, we will create a to-do app to understand the basics of ReactJS. We will be working with class based components in this application and use the React-Bootstrap module to style the components. This to-do list can add new tasks we can also delete the tasks by clicking on them. The logic is handled by a click event handler whenever the user clicks on a task it gets deleted from the list.

Lets have a quick look at how the final application will look like:

ToDo App using ReactJS

ToDo App using ReactJS 

Steps to create the Application:

  • NPX: It is a package runner tool that comes with npm 5.2+, npx is easy to use CLI tools. The npx is used for executing Node packages.
npx create-react-app todo-react
  • Now, goto the folder
cd todo-react
  • Install the bootstrap and react-bootstrap module
npm install bootstrap
npm install react-bootstrap

After following the above steps the Folder structure will look like:

Folder Structure:


The dependencies in package.json file will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "bootstrap": "^5.3.0",
    "react-bootstrap": "^2.7.4",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"

Example: Write the below code in App.js file in the src directory


// App.js File
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";
import ListGroup from "react-bootstrap/ListGroup";
class App extends Component {
    constructor(props) {
        // Setting up state
        this.state = {
            userInput: "",
            list: [],
    // Set a user input value
    updateInput(value) {
            userInput: value,
    // Add item if user input in not empty
    addItem() {
        if (this.state.userInput !== "") {
            const userInput = {
                // Add a random id which is used to delete
                id: Math.random(),
                // Add a user value to list
                value: this.state.userInput,
            // Update list
            const list = [...this.state.list];
            // reset state
                userInput: "",
    // Function to delete item from list use id to delete
    deleteItem(key) {
        const list = [...this.state.list];
        // Filter values and leave value which we need to delete
        const updateList = list.filter((item) => !== key);
        // Update list in state
            list: updateList,
    editItem = (index) => {
      const todos = [...this.state.list];
      const editedTodo = prompt('Edit the todo:');
      if (editedTodo !== null && editedTodo.trim() !== '') {
        let updatedTodos = [...todos]
        updatedTodos[index].value= editedTodo
          list: updatedTodos,
    render() {
        return (
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        fontSize: "3rem",
                        fontWeight: "bolder",
                    TODO LIST
                <hr />
                    <Col md={{ span: 5, offset: 4 }}>
                        <InputGroup className="mb-3">
                                placeholder="add item . . . "
                                onChange={(item) =>
                                aria-label="add something"
                                    onClick={() => this.addItem()}
                    <Col md={{ span: 5, offset: 4 }}>
                            {/* map over and print items */}
                            {, index) => {
                                return (
                                  <div key = {index} > 
                                        <Button style={{marginRight:"10px"}}
                                        variant = "light"
                                        onClick={() => this.deleteItem(}>
                                        <Button variant = "light"
                                        onClick={() => this.editItem(index)}>
export default App;

Steps to run the Application:

  • Type the following command in the terminal:
npm start
  • Type the following URL in the browser:


ToDo App using ReactJS

ToDo App using ReactJS 

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 07 Jun, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials