Unlock the full potential of React and take your coding skills to the next level with this tutorial! We'll build a practical and functional todo list app that showcases the incredible capabilities of this popular JavaScript library. You'll learn how to create your own dynamic and interactive UI elements, making your app more user-friendly and efficient.
Goals:
Define the TodoList Component: We'll kick off by creating a functional component that defines the TodoList component.
Manage State with useState Hook: Next, we'll leverage the power of the useState hook to manage the state in our TodoList component.
Design the User Interface with JSX: To create an engaging and stylish user interface, we'll use JSX to define the UI for our TodoList component.
Handle Events: We'll implement event handling to add and delete todo items, including form submissions and button clicks.
Conditional Rendering: Lastly, we'll use conditional rendering to only display the delete button for a todo item if it exists, making our app more user-friendly and efficient.
Ready to take your React skills to the next level and build a functional and stylish todo list app? Let's get started!
Setup
Let's kick off our React project by opening up your terminal or command prompt. Navigate to the directory where you want to create your new project. Once you're in the desired directory, enter the following command:
npx create-react-app todo-app
Once the project is created, navigate to the project directory using the following command:
cd todo-app
Next, install React and ReactDOM:
npm install react react-dom
They are both essential for creating a React app. React allows you to create reusable UI components, while ReactDOM is responsible for rendering those components into the browser.
Now you can start the development server by running the following command:
npm start
Create a Todo list component
function TodoList () {
return (
<div>
<form>
<input type="text" />
<button>Add Todo</button>
</form>
<ul>
<li>
</li>
</ul>
</div>
);
}
export default TodoList;
Result
Adding the rest of react features
Add import statement that brings in the React library and the useState hook from the react package at the top most part of your component.
import React, { useState } from 'react';
Add useState hook to create two pieces of state: todos and inputValue. todos is an array that will hold the list of todos, and inputValue is a string that will hold the value of the input field.
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
Adding Todo List
import React from 'react'
import { useState } from 'react'
function TodoList () {
const [todos, setTodos] = useState([])
const [inputValue, setInputValue] = useState('')
function handleChange(e){
setInputValue(e.target.value)
}
function handleSubmit(e){
e.preventDefault()
setTodos([...todos, inputValue])
setInputValue('')
}
return (
<div>
<h1>Todo List</h1>
<form>
<input type='text' value={inputValue} onChange={handleChange}/>
<button onClick={handleSubmit}>Add Todo</button>
</form>
<ul>
{todos.map((todo) => (
<li key={todo}>{todo}
<button>Delete</button>
</li>
))}
</ul>
</div>
)
}
export default TodoList
Result
Let's break down the above codes
This is the JSX that will be rendered to the screen. It consists of a form with an input field and a button for adding todos, an unordered list of todos with a delete button for each, and a heading.
<div>
<h1>Todo List</h1>
<form onSubmit={handleSubmit}>
<input type='text' value={inputValue} onChange={handleChange}/>
<button>Add Todo</button>
</form>
<ul>
{todos.map((todo) => (
<li key={todo}>{todo}
<button>Delete</button>
</li>
))}
</ul>
</div>
Inside the form, the value of the input field is set to the inputValue state and the onChange event is set to the handleChange function, which updates the inputValue state every time the input field changes.
<form onSubmit={handleSubmit}>
<input type='text' value={inputValue} onChange={handleChange}/>
<button>Add Todo</button>
</form>
Inside the ul, the map method is used to render each todo as an li element with a key set to the index of the todo. Each li element also contains a delete button.
<ul>
{todos.map((todo) => (
<li key={todo}>{todo}
<button>Delete</button>
</li>
))}
</ul>
This is a function that sets the inputValue state to the value of the input field. It's called every time the input field changes.
const handleChange = (e) => {
setInputValue(e.target.value);
};
This is a function that adds a new todo to the todos state and clears the inputValue state when the form is submitted. It's called when the form is submitted.
const handleSubmit = (e) => {
e.preventDefault();
setTodos([...todos, inputValue]);
setInputValue('');
};
Deleteing Todo List
This is a function that deletes a todo from the todos state. It creates a copy of the todos array using the spread operator, removes the todo at the specified index using the splice method, and sets the todos state to the new array.
const handleDelete = (index) => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
//
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}
<button onClick={() =>handleDelete(index)}>Delete</button>
</li>
))}
Result
This is our final codes put together
import React from 'react'
import { useState } from 'react'
function TodoList () {
const [todos, setTodos] = useState([])
const [inputValue, setInputValue] = useState('')
function handleChange(e){
setInputValue(e.target.value)
}
function handleSubmit(e){
e.preventDefault()
setTodos([...todos, inputValue])
setInputValue('')
}
function handleDelete(index){
const newTodos = [...todos]
newTodos.splice(index, 1)
setTodos(newTodos)
}
return (
<div>
<h1>Todo List</h1>
<form>
<input type='text' value={inputValue} onChange={handleChange}/>
<button onClick={handleSubmit}>Add Todo</button>
</form>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}
<button onClick={() =>handleDelete(index)}>Delete</button>
</li>
))}
</ul>
</div>
)
}
export default TodoList;
Top comments (4)
I love this. It is beginner friendly and amazing work there give it more styling and it will be all ready or you can style it then add a live link to it in the post
Thank you for the feeding back,working on styling
ok
Adding and deleting understood but I was looking for editing it as well