React JS Tutorial - Todo App

In this tutorial, we will learn how to create a Todo App in React. Let's get started and see how we can create a Todo App from scratch.

Setting up the Project

Switch to the project and open the App.js file. Currently, it contains a function component. Let's convert it to a class component by writing the following code:

import React , {Component} from 'react'; 
class App extends Component{ 
   render() { 
    return( 
        <div> Todo </div> 
    )
  }
} 

Next, add a state to the component and create a todo object array with some initial objects:

 state = { 
    todos:[ 
      {id:1,content:'buy pen'}, 
      {id:2,content:'buy pencil'}
    ]
}

Creating the Todos Component

Create a new component called Todos.js and open it. Write the following code in this file:

import React from 'react';

const Todos=({todos})=>{
    const todoList = todos.length? (todos.map(todo =>{
        return(
            <div className="list-group" key={todo.id}>
                <a herf="#" onClick={()=>{deleteTodo(todo.id)}} className="list-group-item list-group-item-action list-group-item">
                    {todo.content}
                </a>
            </div>
        )
    })):(<p>There is no any todo</p>);
    return(
        <div className="container">
            <div className="row">
                <div className="col-md-6 offset-md-3">
                    {todoList}
                </div>
            </div>
        </div>
    )
}

export default Todos;

Adding Bootstrap to the Project

Go to the Get Bootstrap website and click on "Get Started". Copy the Bootstrap CSS CDN and paste it into the index.html file in the public folder. Also, copy the Bootstrap JavaScript CDN and paste it just before the closing body tag in the index.html file.

Creating the AddTodo Component

Create another new component called AddTodo.js and open it. Write the following code in this file:

import React,{Component} from 'react';

class AddTodo extends Component{
    state = {
        content:''
    }

    handleChange=(e)=>{
        this.setState({
            content:e.target
        });
    }

    handleSubmit=(e)=>{
        e.preventDefault();
        this.props.AddTodo(this.state);
        this.setState({
            content:''
        });
    }
    render(){
        return(
            <div className="container">
                <div className="row">
                    <div className="col-md-6 offset-md-3">
                        <form onSubmit={this.handleSubmit}>
                            <div className="form-group">
                                <label>Add New Todo</label>
                                <input type="text" className="form-control" id="todo" onChange={this.handleChange} value={this.state.content} />
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}

export default AddTodo;

Importing and Using the Components

Go back to the App.js file and import the Todos and AddTodo components. Use them in the App component as follows:

import React, {Component} from 'react';

import Todos from './components/Todos';
import AddTodo from './components/AddTodo';

class App extends Component{
    state = {
        todos:[
            {id:1,content:'buy pen'},
            {id:2,content:'buy vegitables'}
        ]
    }

    addTodo=(todo)=>{
        todo.id = Math.random();
        let todos = [todo,...this.state.todos];
        this.setState({
            todos:todos
        });
    }

    deleteTodo =(id)=>{
        const todos = this.state.todos.filter(todo=>{
            return todo.id != id
        });
        this.setState({
            todos:todos
        });
    }

    render(){
        return(
            <div>
                <h3 className="text-center">React App</h3>
                <AddTodo />
                <Todos todos={this.state.todos} deleteTodo={this.deleteTodo} />
            </div>
        )
    }
}

Testing the Todo App

Now, let's test the Todo App. Switch to the browser and add some todos by entering text in the text box and pressing the enter key. You should see the todos listed on the page. You can also delete todos by clicking on them in the list.

In this way, you can create a fully functional Todo App in React JS.