http-response-handler/S.a.d.u/moduals/form/data.jsx

A comprehensive utility for standardizing HTTP responses in Node.js applications

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

export default function Data() {
    const userList =  JSON.parse(localStorage.getItem("user")) 

    const [data, setData] = useState([]);

    useEffect(() => {
        setData(userList)
    }, [])

    const  navigate = useNavigate()

    const handleDelete = (i) =>{
        const Delete = window.confirm("are uo Sure")
        if (Delete) {
           userList.splice(i ,1) 
           localStorage.setItem("user",JSON.stringify(userList))
        }
    }

    const handleEdite = (i)=>{
        navigate(`/edite?editeid=${i}`)
    }

    return (
        <div>
            <table>
                {data.length > 0 ? (
                    <>
                        <tr>
                            {Object.keys(data[0]).map((el) => (
                                <th>{el}</th>
                            ))}
                            <th>Delete</th>
                            <th>Update</th>
                        </tr>

                        {data.map((el, i) => (
                            <tr>
                                {Object.values(el).map((el) => (
                                    <td>{el}</td>
                                ))}
                                <td><button onClick={() => handleDelete(i)}>Delete</button></td>
                                <td><button onClick={() => handleEdite(i)}>Edite</button></td>
                            </tr>
                        ))}
                    </>
                ) : (
                    <span>no data</span>
                )}
            </table>
        </div>
    );
}