useEffect() Hook

stockee une valeur en utilistant localStarage

UserCrud()

        import React, { useState, useEffect } from 'react'
        export default function UserCrud()() {
            const [conditions, setConditions] = useState({
                isClickedEdit: false,
                userIndex: -1,
            })
            const [user, setUser] = useState({
                name: "",
                age: "",
            })
            const [users, setUsers] = useState(JSON.parse(window.localStorage.getItem('usersList')))
            const getValues = (e) => {
                const { name, value } = e.target
                setUser({
                    ...user,
                    [name]: value
                })
            }
            const addUser = () => {
                setUsers([...users, user])
            }
            const deleteUser = (ind) => {
                const del = [...users]
                res=del.filter((user,index)=>index!==ind)
                setUsers(res)
            }
            const editUser = (usr, ind) => {
                setUser(usr)
                setConditions({
                    ...conditions,
                    isClickedEdit: true,
                    userIndex: ind
                })
            }
            const updateUser = () => {
                const updatedUser = [...users]
                updatedUser[conditions.userIndex] = user
                setUsers(updatedUser)
                setConditions({
                    ...conditions,
                    isClickedEdit: false,
                    userIndex: -1,
                })
            }
            useEffect(() => {
                window.localStorage.setItem('usersList', JSON.stringify(users))
            }, [users])

            return(
                <div>
                    <h1>Add User</h1>
                    <div>
                        <div>
                            <label>Name</label>
                            <input type="text" name="name" onChange={getValues} value={user.name} />
                        </div>
                        <div>
                            <label>Age</label>
                            <input type="text" name="age" onChange={getValues} value={user.age} />
                        </div>
                        {
                            (conditions.isClickedEdit) ?
                                <button type='submit' onClick={updateUser}>Update User</button>
                                :
                                <button type='submit' onClick={addUser}>Add User</button>
                        }
                    </div>
                    <div>
                        <table>
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Age</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                            {
                                usersCopy.map((user, index) => {
                                    return (
                                        <tr key={index}>
                                            <td>{user.name}</td>
                                            <td>{user.age}</td>
                                            <td>
                                                <button onClick={()=> editUser(user, index)}>Edit</button>
                                                <button onClick={()=> deleteUser(index)}>Delete</button>
                                            </td>
                                        </tr>
                                    )
                                })
                            }
                            </tbody>
                        </table>
                    </div>
                </div>
            )
        }