To-do-list del edit save

 import React, { useReducer, useState } from 'react'


export default function MyExampleReducer() {

    const myState = [];

    const myReducer = (state,action)=> {

            switch(action.type)
            {

                case "ADD" :

                return [...state, action.payload];
           
                case "Delete":

                return state.filter((d,index)=> {

                    return index != action.payload;
                });

                case "Save":

                return state.map((d,myundex) => {

                    if(myundex == action.index )
                    {
                        return action.payload;
                    }
                    else
                    {
                      return  d;
                    }

                });

                default :

                 return state;
            }

    }

    const myChange = (e)=> {

        setInput({...input,[e.target.name] : e.target.value});

    }

    const mySave = (e) => {

        if(index >= 0 )
        {
            setData({type:"Save", payload : input, index : index});
            setIndex(-1);

        }
        else
        {
        setData({type:"ADD", payload : input});
        }
    }
   const [data,setData]  = useReducer(myReducer, []);
   const [input,setInput] = useState({});
   const [index,setIndex] = useState(-1);

   const myDelete = (index)=> {

    setData({type:"Delete", payload : index,});
   }

   const edit = (index)=> {

   
   setInput(data[index]);
   setIndex(index);
   }


  return (
    <div>

            <input type="text"  name='item'
           
                value={input.item}
            onChange={myChange}/>

<input type="text"  name='item1'
           
            value={input.item1}
        onChange={myChange}/>

            <button onClick={mySave}>Save</button>

            {
                    data.map((element,index)=> {

                         return (<div>{element.item}
                         {element.item1}
                         
                                <button onClick={()=> {
                                        myDelete(index)
                                }}>Delete</button>

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

            }
    </div>
  )
}

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