Create a Simple To-Do List in React.js

React.js is a powerful JavaScript library for building interactive user interfaces.
It’s perfect for creating dynamic applications, and one of the best ways to learn React is by building simple projects. In this article, we’ll walk through how to create a basic to-do list application using React.js.

Step-by-Step Guide: Building a To-Do List in React.js
Prerequisites:
Before we begin, make sure you have the following installed:- Node.js (which comes with npm)- React.js (You can set up a React app using `create-react-app`)
You can create a new React app by running:
npx create-react-app to do-list
cd todo-list
npm start

Step 1: Setting Up the To-Do List Component

In your `src` folder, create a new file called `TodoList.js`. This file will house the core logic for the
to-do list.

import React, { useState } from 'react';
    const TodoList = () => {
    const [tasks, setTasks] = useState([]);   // For storing the tasks
    const [task, setTask] = useState('');     // For capturing user input
    const addTask = () => {
        if (task.trim()) {
        setTasks([...tasks, task]);          // Add new task to the task array
        setTask('');                         // Clear input field
        }
    };
    return (
        <div>
        <h1>To-Do List</h1>
        <input 
            type="text" 
            value={task} 
            onChange={(e) => setTask(e.target.value)} 
            placeholder="Add a new task" 
        />
        <button onClick={addTask}>Add Task</button>
        <ul>
            {tasks.map((t, index) => (
            <li key={index}>{t}</li>
            ))}
        </ul>
        </div>
    );
    };
    export default TodoList;

Step 2: Adding Functionality

In this component, we’re using React’s `useState` hook to store the list of tasks and the current input
value. The `addTask` function adds the current task to the list and clears the input field. We use the
`map` function to render each task in an unordered list.

Step 3: Styling the To-Do List

You can enhance your to-do list by adding some basic CSS for styling. Create a `TodoList.css` file
and add some styles:

div {
    margin: 20px;
    font-family: Arial, sans-serif;
    }
    input {
    padding: 10px;
    margin-right: 10px;
    width: 300px;
    border-radius: 5px;
    border: 1px solid #ccc;
    }
    button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    }
    ul {
    list-style-type: none;
    padding-left: 0;
    }
    li {
    padding: 10px;
    background-color: #f9f9f9;
    margin-bottom: 5px;
    border-radius: 5px;
    border: 1px solid #ddd;
    }

In your `TodoList.js` file, import this CSS file:
    import './TodoList.css'

Step 4: Removing Tasks (Optional)

To make the to-do list more dynamic, you can add a feature that allows users to remove tasks by
clicking on them. Update the `TodoList.js` component as follows:

const TodoList = () => {
const [tasks, setTasks] = useState([]);
const [task, setTask] = useState('');
const addTask = () => {
if (task.trim()) {
setTasks([...tasks, task]);
setTask('');
}
};
const removeTask = (indexToRemove) => {
setTasks(tasks.filter((_, index) => index !== indexToRemove));
};
return (
<div>
<h1>To-Do List</h1>
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="Add a new task"
/>
<button onClick={addTask}>Add Task</button>
<ul>
{tasks.map((t, index) => (
<li key={index} onClick={() => removeTask(index)}>{t}</li>
))}
</ul>
</div>
);
};

Now, when you click on a task, it will be removed from the list.

Conclusion:

In this guide, we built a simple to-do list application in React.js, covering the basics of state
management, user input handling, and rendering lists. You can expand this further by adding more
features like editing tasks, saving tasks to local storage, or integrating a backend to persist tasks.

Happy coding

WordPress Action and Filter Hooks

Important Modules in React.js: A Developer’s Guide