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
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
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.
reactapp/ | src/ |__todo/ | |__todoApp.js | |__todoList.js |__App.js |__index.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 {
constructor(){
super();
this.state={
inputData:"",
todoItems:[]
}
}
changeTodoInput = (event) =>{
this.setState({inputData:event.target.value})
}
addTodo = (event) =>{
if(this.state.inputData!==''){
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
})
this.setState({todoItems:newTodoItems})
}
render(){
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>
</div>
</div>
<TodoList items={this.state.todoItems} deleteTodo={this.deleteTodo}/>
</div>
</div>
</div>
);
}
}
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{
render(){
return(
<ul className="list-group list-group-flush">
{
this.props.items.map((value, 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>
</li>
</React.Fragment>
)
})
}
</ul>
);
}
}
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 {
render(){
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
http://localhost:3000/