How can get multiple users in React

Question

I want to get some user in localstorage and use it in login page. In the following code, I was able to save only one user in localstorage, and by adding a new user, the old user is deleted and the new user is replaced. But I want the old user not to be deleted by adding each new user and I want to add as many users as possible.

sign in page:

const Signin = () => {

    const [values, setValue] = useState({ email: "", password: "" });
    const navigate = useNavigate();

    const onChangeInput = (name,e) => {

        setValue(pvalue => ({
            ...pvalue,
            [name]: e.target.value,
        }));

    };

    const submit = () => {
        let users = JSON.parse(localStorage.getItem("users") || "[]")
        users.push({values})

        localStorage.setItem('users', JSON.stringify(users))
        
    }

    function handleSubmit(e) {
        e.preventDefault()
        localStorage.setItem("user", JSON.stringify(values));

        const loggeduser = JSON.parse(localStorage.getItem("user"));
        if (
            values.email === loggeduser.email &&
            values.password === loggeduser.password
        ) {
            alert("Emaill & Password is available!!!")
        }
        else{
            navigate("/");
        }
    };

    return (
        <div className="text-center m-5-auto">
            <form onSubmit={submit}>
                <p>
                    <label>Email address:</label><br />
                    <input
                        name="email"
                        value={values.email}
                        onChange={(e)=>onChangeInput('email',e)}
                    />
                </p>
                <p>
                    <label>Password:</label><br />
                    <input
                        name="password"
                        value={values.password}
                        onChange={(e)=>onChangeInput('password',e)}
                    />
                </p>
                <p>
                    <button id="btn" type="submit" onClick={handleSubmit}>Register</button>
                </p>
            </form>
        </div>
    );
}

export default Signin;

I did various searches and did not find any results

Answer 1

I hope following solution might help you :

 function handleSubmit(e) {
        e.preventDefault()
        if (
            values.email === loggeduser.email &&
            values.password === loggeduser.password
        ) {
            alert("Emaill & Password is available!!!")
 

        let users = JSON.parse(localStorage.getItem("users") || "[]")
        users.push({values})

        localStorage.setItem('users', JSON.stringify(users))
        }
        else{
            navigate("/");
        }
    };