Creating the Project

To initiate our React project, we will use Create React App. The following command will set up the project:

npx create-react-app todo-list

Next, we will need the uuid package to generate unique IDs for our to-do items. Install it with the command:

npm i uuidv4

Creating the To-Do App

To develop the to-do list application, we will implement the following code:

import { useState } from "react";

import { v4 as uuidv4 } from "uuid";

export default function App() {

const [todo, setTodo] = useState("");

const [todos, setTodos] = useState([]);

const submit = (e) => {

e.preventDefault();

setTodos((todos) => [

...todos,

{

id: uuidv4(),

todo

}

]);

};

const deleteTodo = (index) => {

setTodos((todos) => todos.filter((_, i) => i !== index));

};

return (

<div className="App">

<form onSubmit={submit}>

<input value={todo} onChange={(e) => setTodo(e.target.value)} />

<button type="submit">Add</button>

</form>

{todos.map((t, i) => {

return (

<div key={t.id}>

{t.todo}

<button onClick={() => deleteTodo(i)}>delete</button>

</div>

);

})}

</div>

);

}

In this code, we define the todo state linked to the input field, while todos maintains an array of to-do items. The submit function is responsible for adding new items to the todos array. We prevent the default form submission behavior using e.preventDefault() and then update the state with the new item, which includes a unique ID generated by uuidv4.

The deleteTodo function is triggered when the delete button is clicked, allowing us to remove an item based on its index.

The return statement renders a form with an input field and a button to add new items. Below the form, we map through the todos array, rendering each item along with a delete button.

This video tutorial demonstrates how to create a React To-Do List App, making it accessible for beginners interested in React JS projects.