To-Do List In React.js

 we'll show you how to create a simple to-do list using React. The to-do list will have input fields for the user to enter new tasks, a list of existing tasks, and buttons to mark tasks as completed or delete them. You'll learn how to use React's useState hook to manage state in your component, how to handle user events like clicks and input changes, and how to render dynamic content using map.

source code:

React.js file:

import React, { useState } from 'react';

import './componet1.css';

function Apped() {

  const [task, setTask] = useState('');

  const [taskList, setTaskList] = useState([]);

const [editTask, setEditTask] = useState(null);

 const handleSubmit = (e) => {

    e.preventDefault();

    if (task.trim()) {

      if (editTask !== null) {

        const updatedTaskList = [...taskList];

        updatedTaskList[editTask] = task;

        setTaskList(updatedTaskList);

        setEditTask(null);

      } else {

        setTaskList([...taskList, task]);

      }

      setTask('');

    }

  };

const handleEdit = (index) => {

    setEditTask(index);

    setTask(taskList[index]);

  };

const handleComplete = (index) => {

    const updatedTaskList = [...taskList];

    updatedTaskList[index] = `${taskList[index]} - Completed`;

    setTaskList(updatedTaskList);

  };

const handleDelete = (index) => {

    const updatedTaskList = [...taskList];

    updatedTaskList.splice(index, 1);

    setTaskList(updatedTaskList);

  };return (

    <div className="App">

      <h1>My To-Do List</h1>

      <form onSubmit={handleSubmit}>

        <input

          type="text"

          placeholder="Add a task..."

          value={task}

          onChange={(e) => setTask(e.target.value)}

        />

        <button type="submit">{editTask !== null ? 'Save' : 'Add'}</button>

      </form>

      <ul>

        {taskList.map((item, index) => (

          <li key={index} className={item.includes('Completed') ? 'completed' : ''}>

            <span>{item}</span>

            <div>

              <button onClick={() => handleEdit(index)}>Edit</button>

              <button onClick={() => handleComplete(index)}>Complete</button>

              <button onClick={() => handleDelete(index)}>Delete</button>

            </div>

          </li>

        ))}

      </ul>

    </div>

  );

}

export default Apped;

componet1.css:

h1{

  text-align: center;

}

form{

  display: flex;

  margin-bottom: 20px;

 }

input{

  flex: 1;

  padding: 10px;

  border: none;

  border-radius: 5px 0 0 5px;

}

button{

  padding: 10px;

  border: none;

  border-radius: 0 5px 5px 0;

  background-color: #3f51b5;

  color: #fff;

  cursor: pointer;

  margin-left: 10px;

}

button:hover{

  background-color: #1a237e;

}

ul{

  list-style: none;

  padding: 0;

}

li{

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 10px;

  margin-bottom: 10px;

  border: 1px solid #ccc;

  border-radius: 5px;

  background-color: white;

}

li.completed{

  background-color: #e0e0e0;

  text-decoration: line-through;

  color: #999;

}

li span{

  flex:1;

  margin-right: 10px;

}

output: