In this article, we are going to build a NextJS based Todo application. For simplicity, we are not using any database or API calls.
ToDo app is an application that shows you a list of items to be completed. You can add new items, remove any item or edit any item. To make it simple, we will only develop adding and removing parts. It looks something like this.
Here is the tech stack for the project:
React: For functional style component and state management.
NextJS: React-based framework for SSR and making it SEO friendly.
React-bootstrap: React-based bootstrap framework for UI components. You can use plain bootstrap but its react variant is more convenient and does the same job.
Project Setup
Below are the steps to create the project.
Create NextJS app
Run the following command to create a NextJS based project.
npx create-next-app todo-app
Within a few seconds, your NextJS todo app project will be created. Go inside the project folder and install bootstrap.
Install bootstrap
npm i react-bootstrap bootstrap
This will install the bootstrap dependency.
Write the code
Now open the index.js
file and write the following code.
import React, {useState} from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import {useRouter} from "next/router";
export default function Home() {
const [items, setItems] = useState([])
const [item, setItem] = useState('')
const router = useRouter();
function add() {
setItems([...items, item])
setItem('')
}
function remove(value) {
const newarr = items.filter(value1 => value1 !== value)
setItems(newarr)
}
return <Container>
<Row>
<h1>Todo App</h1>
<Col>
<Form.Control type='text' placeholder='Enter item' value={item}
onChange={event => setItem(event.target.value)}/>
</Col>
<Col>
<Button onClick={() => add()}>Add Item</Button>
</Col>
</Row>
{items.map((value, index) =>
<Row key={index} className='mt-2'>
<Col>{value}</Col>
<Col><Button variant={"danger"} onClick={() => remove(value)}>Remove</Button></Col>
</Row>)}
</Container>
}
As you can see, we have created a react functional component. Then we used useState
hook to maintain items state.
The items
variable contains all the items in an array.
The item
variable represents an item being added. The 2 functions called add()
and remove()
are used to add and remove an item to/from the items
array. They are called on the click of the button Add and Remove respectively.
Run the application
Go inside the project folder and run the following command to run the application in dev mode.
npm run dev
Now your project will start on port 3000 (default) and you can access it at localhost:3000
. If the port 3000 is not available then NextJS will launch the application on 3001.
Adding an item
Whenever you add an item, the item gets added to the items
array whose state is being managed by React. So, when its state gets modified, the component re-renders and you see the updated list.
Removing an item
When an item is removed, it gets removed from the items
array. It means that the state of items
is modified, hence the component re-renders and you see the modified list.
You can see that you can easily add and remove the items in the app.
Conclusion
ToDo application works on the concept of state management. Whenever items are added or removed, they modify the state of the underlying variable that stores the items hence the component re-renders and you see the list being updated dynamically. You can also save these items into database via REST APIs or some other mechanism but that is out of scope of this article.