Open in app

jinal shah

Follow 339 Followers About

ReactJs Step-By-Step Tutorial Series — Part 4

— Build ToDo Application Using ReactJS
jinal shah Mar 26, 2020 · 10 min read

Hello Readers,

This is the Part-4 of our ReactJs tutorial series. In this tutorial, we will make a simple
ToDo application, but before that, you can check and refer to any previous article here:

Quick links for our ReactJs Series:

Tutorial #1 — Introduction and Installation of ReactJS

Tutorial #2 — ReactJS Components

Tutorial #3 — ReactJS Components Communication

Tutorial #4 — Build ToDo Application Using ReactJS (This Tutorial)

Tutorial #5 — Deploy ToDo Application to Github pages

What We’ll Build Today

Create a ToDo Application

Display all to-dos

 Use Bootstrap
Open in app
Use Font-awesome icons

Remove to-do item from the list

Update to-do item

Apply the CSS styling conditionally

Add to-do item to the list

We will make a basic to-do list application where we can add, update and delete items
from a list. With this application, we will also learn about how to use Bootstrap and
Font-awesome icons and will also apply some styles conditionally.

So let’s start with it..!

Create Todo Application

As we have already created this ToDo application using React, we will continue with this
only.

If you haven’t created it yet then you can follow it from our Part-1 here.

Display all Todos

We will start by creating a ToDoList (class) component. Here we will have a static array
of ToDo list items.

import React, { Component } from "react";

export default class TodoList extends Component {

state = {
todos: [
{ Id: '1', Title: 'Push your code to github', Status: 'Done' },
{ Id: '2', Title: 'Email to your manager', Status: 'Pending' }
]
};
 render() {
return (
Open in app
<div>
<h1>TodoList </h1>
</div>
);
}
}

Now let’s loop through this array and display these records using simple <table> tag.
Note that with React we are using JSX syntax so here we can display this array using
this.state.todos.map(). This map() will iterate each item of the loop and display it one
by one.

To modify this ToDoList.js as below:

import React, { Component } from "react";

export default class TodoList extends Component {

state = {
todos: [
{ Id: '1', Title: 'Push your code to github', Status: 'Done' },
{ Id: '2', Title: 'Email to your manager', Status: 'Pending' }
]
};

render() {
return (
<div>
<h1>TodoList </h1>
<table>
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{this.state.todos.map(x => {
return (
<tr key={x.Id}>
<td>{x.Id}</td>
<td>{x.Title}</td>
<td >{x.Status}</td>
 <td>
Open in app <button>Delete</button>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
}

Now call this ToDo component on App.js and run this app and we can see all ToDos on
the browser:

Now before going into the more details we quickly see how we can use Bootstrap and
Font-awesome icons in our React application.

Use Bootstrap
1)To use the Bootstrap, install its package from npm into your app.

npm install bootstrap

2) Now give this BootstrapCDN path on index.html

 <link
Open in app rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstra
p.min.css" integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.
min.js" integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>

3) Now on our ToDoList.js we just apply Bootstrap Styling.

So on <table> tag use it’s class “table”.

...

...

<table className=”table”>

...

</table>
...

Note above that, in HTML, we can use a class as an attribute name but in JSX we cannot
use the word class. We have to use className instead. Because class is a reserved word
in JavaScript and JSX will be converted to javaScript.

Now run the app and you can see the changes.
Open in app

Use Font-awesome
1)To use the Font-awesome, install all given packages from npm into your app.

npm i --save @fortawesome/fontawesome-svg-core

npm i --save @fortawesome/free-solid-svg-icons

npm i --save @fortawesome/react-fontawesome

2) Now on App.js import the library for the font-awesome

import { library } from "@fortawesome/fontawesome-svg-core";

import { faTrash, faPlus, faEdit } from "@fortawesome/free-solid-svg-

icons";

library.add(faTrash, faEdit, faPlus);

Above we have also included the library for whatever the icons we want to use in our
application.

3) Now open the ToDoList.js and apply the trash icon on our Delete button.

For this first import the font-awesome package here:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

Now change button as below:

 <button
Open in app className="btn btn-primary">
<span>
<FontAwesomeIcon icon="trash"></FontAwesomeIcon>
</span>
</button>

Now go to the browser and see this icon.

So this same way, we will also have an Edit button. So put it after the Delete button.

<button className="btn btn-primary">

<span>
<FontAwesomeIcon icon="edit"></FontAwesomeIcon>
</span>
</button>
Remove to-do item from the list
Open in app
Ok, so now let’s have Click event listener for these two buttons.

So we will just declare and attach deleteToDo() function to this Delete button.

deleteToDo = (todo) => {

const filteredItems = this.state.todos.filter(x => x.Id !==
todo.Id);

this.setState({
todos: filteredItems
});
};

<button className="btn btn-primary" onClick={() =>

this.deleteToDo(x)}>
<span>
<FontAwesomeIcon icon="trash"></FontAwesomeIcon>
</span>
</button>

Note that this deleteToDo() function will expect an argument — which list item is going
to be deleted. And as I said before about this.setState(), we have to use it to update our
todo array. And inside this deleteToDo() function we are just filtering our array-like we
do normally.

So click on the Delete button and you can see it is removing items from this array. So the
state is updating dynamically, yeah..!!
Update to-do item
Open in app
Now let’s Edit this ToDo list item. For this, we will make a function editToDo() and call
it on the Edit button.

editToDo = (x) => {

this.setState(state => ({
todos: state.todos.map(todo => {
if (todo.Id === x.Id) {
return {
...todo,
Status: todo.Status === "Done" ? "Pending" :
"Done"
};
} else {
return todo;
}
})
}));
};

<button className="btn btn-primary" onClick={() =>

this.editToDo(x)}>
<span>
<FontAwesomeIcon icon="edit"></FontAwesomeIcon>
</span>
</button>

In this editTodo() function, we just updating the status of the current to-do list item.
This means if the status is ‘pending’ then we will update it to ‘done’ and vice versa.

Here note this line …todo inside this editToDo() function. This three dots(…) is called
as Spread Operator. By using this, it will keep our todos array intact and in the next
line, we are just updating the value of the status attribute, so the other two attributes —
id and title will not be changed.

So now run this code and update the status.

Open in app

Here is the ToDoList.js for the reference:

import React, { Component } from "react";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export default class TodoList extends Component {

state = {
todos: [
{ Id: '1', Title: 'Push your code to github', Status:
'Done' },
{ Id: '2', Title: 'Email to your manager', Status:
'Pending' }
]
};
deleteToDo = (todo) => {
const filteredItems = this.state.todos.filter(x => x.Id !==
todo.Id);
this.setState({
todos: filteredItems
});
};
addToDo = (todo) => {
this.setState({
todos: [...this.state.todos, todo]
});
};
editToDo = (x) => {
this.setState(state => ({
todos: state.todos.map(todo => {
if (todo.Id === x.Id) {
return {
...todo,
Status: todo.Status === "Done" ? "Pending" :
"Done"
};
} else {
return todo;
}
})
}));
};
render() {
return (
<div>
 <h1>TodoList </h1>
Open in app <table className="table" >
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{this.state.todos.map(x => {
return (
<tr key={x.Id}>
<td>{x.Id}</td>
<td>{x.Title}</td>
<td>{x.Status}</td>
<td>
<button className="btn btn-
primary" onClick={() => this.deleteToDo(x)} >
<span>
<FontAwesomeIcon
icon="trash"></FontAwesomeIcon>
</span>
</button>
|
<button className="btn btn-
primary" onClick={() => this.editToDo(x)}>
<span>
<FontAwesomeIcon
icon="edit"></FontAwesomeIcon>
</span>
</button>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
}

Apply the CSS styling conditionally

Now let’s apply some styling. What we do is, if the status is ‘pending’ then we will display
Open in app
it in red color and if ‘done’ then it should be displayed in Green color. And we will check
the status conditionally on our ToDo.js.

So let’s apply this single line of code our <td> which is displaying the status:

<td style={{ color: x.Status === "Done" ? "green" : "red" }}>

{x.Status}

</td>

And run this app and see the output:

Add to-do item to the list

To add a new to-do item, we have to make a simple form and by submitting that form we
will add that list item to our original todos array.

For this let’s create another component as AddToDo.js. Inside this component, we will
have our Add form. And then we will call this Add component to our ToDo.js.

AddToDo.js
 import
Open in app React, { Component } from "react";
export default class AddTodo extends Component {

render() {
return (
<div>
<h3>
Add ToDo
</h3>
<form>
<div className="form-group" >
<input value={this.state.Id} className="form-
control" placeholder="Enter Id" />
</div>
<div className="form-group" >
<input value={this.state.Title}
className="form-control" placeholder="Enter Title" />
</div>
<div className="form-group">
<select value={this.state.Status}
className="form-control" >
<option value="Done" >Done</option>
<option value="Pending" >Pending</option>
</select>
</div>
<button type="submit" className="form-control btn
btn-primary" >Add Todo</button>
</form>
</div>
);
}
}

So above we have just designed our Add ToDo form and inside the form, we have added
input for Id, Title and Status and one submit button. Also, apply some basic bootstrap
class for these inputs.

Now we need to import this AddToDo component and call it on our ToDoList.js.

import AddTodo from './AddTodo';

render() {
return (
<div>
<AddTodo></AddTodo>
<h1>TodoList </h1>
<table className="table" >
 <thead>
Open in app

Now save this and check it first.

Now next step is to fetch the updated value of all inputs and drop down and then pass it
to the original todos array.

So to fetch the latest value of input box we will declare it’s onChange() function and
inside that function, we will just assign this updated value to our local property. So for
that, we will create that local variable first and then update it states meaning its value
from onChange().

So here are the variables declaration and onChange() handlers for all 3 inputs — id,
title, and status.

AddToDo.js

state = {
Id: "",
Title: "",
Status: "Pending"
};
 handleIdChange = (event) => {
Open in app this.setState({
Id: event.target.value
});
};
handleTitleChange = (event) => {
this.setState({
Title: event.target.value
});
}
handleStatusChange = (event) => {
this.setState({
Status: event.target.value
});
};

So by now our all properties/variables have new updated value and we will use these
properties when we submit this form.

So let’s create form submit event and call it on our form tag and also call onChange()
event for all the inputs.

AddToDo.js

import React, { Component } from "react";

export default class AddTodo extends Component {
state = {
Id: "",
Title: "",
Status: "Pending"
};

handleIdChange = (event) => {

this.setState({
Id: event.target.value
});
};
handleTitleChange = (event) => {
this.setState({
Title: event.target.value
});
}
handleStatusChange = (event) => {
this.setState({
Status: event.target.value
});
};
 handleToDoSubmit = (event) => {
Open in app event.preventDefault();
this.props.onAdd({
Id: this.state.Id,
Title: this.state.Title,
Status: this.state.Status
});
this.setState({
Id: "",
Title: "",
Status: "Pending"
});
};
render() {
return (
<div>
<h3>
Add ToDo
</h3>
<form onSubmit={this.handleToDoSubmit} >
<div className="form-group" >
<input value={this.state.Id} onChange=
{this.handleIdChange} className="form-control" placeholder="Enter Id"
/>
</div>
<div className="form-group" >
<input value={this.state.Title} onChange=
{this.handleTitleChange} className="form-control" placeholder="Enter
Title" />
</div>
<div className="form-group">
<select value={this.state.Status} onChange=
{this.handleStatusChange} className="form-control" >
<option value="Done" >Done</option>
<option value="Pending" >Pending</option>
</select>
</div>
<button type="submit" className="form-control btn
btn-primary" >Add Todo</button>
</form>
</div>
);
}
}

Now we need to call this child(AddToDo) component’s function on parent(ToDoList)

component.

So remember we have added <AddToDo></AddToDo> tag on ToDoList.js

So it is calling our child component right.! so here we will bind our submit event method
Open in app
of our AddToDo component. So it will actually handle and update our todos array. For
that, we need to have one last method and that is addTodo(). This addToDo() will be on
ToDoList.js file and we will call it from our <AddToDo></AddToDo> tag as I said
before.

ToDoList.js

addToDo = (todo) => {

this.setState({
todos: [...this.state.todos, todo]
});
};

render() {
return (
<div>
<AddTodo onAdd={this.addToDo}></AddTodo>
<h1>TodoList </h1>
<table className="table" >
<thead>

On this line <AddTodo onAdd={this.addToDo}></AddTodo> we are actually

declaring a prop — onAdd. Because as I told you in the previous article that props are
used for component communication. And in our case, original todos array is in parent
component and new update array is on child component so.

Now finally time to run this app and add some items.
Open in app

Now it’s time to move on our last article of this series that is Part-5 where we will Deploy
this ToDo Application to Github pages..!!

Reactjs JavaScript

About Help Legal

Get the Medium app

Open in app