Add-Edit_delete

 import React, { useState } from "react";


function App() {

  const [tasks, setTasks] = useState([]);

  const [newTask, setNewTask] = useState("");

  const [isEditing, setIsEditing] = useState(false);

  const [currentTaskIndex, setCurrentTaskIndex] = useState(null);


  const addTask = () => {

    if (newTask.trim()) {

      setTasks([...tasks, newTask]);

      setNewTask("");

    }

  };



  const editTask = (index) => {

    setNewTask(tasks[index]); // Set the current task to the input field

    setIsEditing(true);

    setCurrentTaskIndex(index);

  };



  const saveTask = () => {

    if (newTask.trim()) {

      const updatedTasks = [...tasks];

      updatedTasks[currentTaskIndex] = newTask;

      setTasks(updatedTasks);

      setNewTask("");

      setIsEditing(false);

      setCurrentTaskIndex(null);

    }

  };


  const removeTask = (index) => {

    const updatedTasks = tasks.filter((_, i) => i !== index);

    setTasks(updatedTasks);

  };


  return (

    <div style={{ textAlign: "center", marginTop: "50px" }}>

      <h1>To-Do List with Edit Feature</h1>

      <input

        type="text"

        value={newTask}

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

        placeholder="Add or edit a task"

      />

      <button onClick={isEditing ? saveTask : addTask}>

        {isEditing ? "Save" : "Add"}

      </button>

      <ul>

        {tasks.map((task, index) => (

          <li key={index}>

            {task}{" "}

            <button onClick={() => editTask(index)} style={{ color: "blue" }}>

              Edit

            </button>{" "}

            <button onClick={() => removeTask(index)} style={{ color: "red" }}>

              X

            </button>

          </li>

        ))}

      </ul>

    </div>

  );

}


export default App;

Comments

Post a Comment

Popular posts from this blog

Controlled Form

 import React, { useState } from "react"; function Form() {   const [formData, setFormData] = useState({ name: "", email: "" });   const [submittedData, setSubmittedData] = useState(null);   const handleChange = (e) => {     const { name, value } = e.target;     setFormData({ ...formData, [name]: value });   };   const handleSubmit = (e) => {     e.preventDefault();     setSubmittedData(formData);   };   return (     <div>       <h2>Controlled Form</h2>       <form onSubmit={handleSubmit}>         <input           type="text"           name="name"           placeholder="Name"           value={formData.name}           onChange={handleChange}         />      ...
Read more

LOCAL STORE

 //App.js import React from " react " ; import { Routes , Route } from " react-router-dom " ; import { ToastContainer } from " react-toastify " ; import " react-toastify/dist/ReactToastify.css " ; import LoginPage from " ./Pages/LoginPage " ; import UsersList from " ./Pages/UsersList " ; import HomePage from " ./Pages/HomePage " ; import Footer from " ./Components/Footer " ; function App () {   return (     < >       < ToastContainer         position = " top-center "         autoClose = { 2000 }         hideProgressBar = { false }         newestOnTop = { false }         closeOnClick         rtl = { false }         pauseOnFocusLoss         draggable         pauseOnHover       />       < Routes >   ...
Read more

NodeJS MongoDB

 server.js const mongoose = require ( 'mongoose' ); const dotenv = require ( 'dotenv' ); dotenv . config ({ path : './config.env' }); const app = require ( './app' ); // Require the Express app from app.js const DB = process . env . DATABASE ; // Connect to the database-------------------------------------- mongoose     . connect ( "mongodb://localhost:27017/nikedb" , {         useNewUrlParser : true ,         useUnifiedTopology : true ,         // Other options if needed     })     . then (() => {         console . log ( 'Database connection successful' );     })     . catch (( err ) => {         console . error ( 'Database connection error:' , err );     }); const port = process . env . PORT || 3000 ; app . listen ( port , () => {     console . log ( `App running on port ${ port } ` ); ...
Read more