[Solved]-Local storage not updating React-Reactjs

you are adding only one new user while clicking on add button. You need to copy previous data also when setting all users.

Second thing setting state is async and hence your localStorage and allusers may have different value and to avoid this one you need to use useEffect to set the value.

  const add = ()=>{
          setAllusers([...allusers ,newuser])
          setID(id+1); // increase id by 1
      }

useEffect(() => {
localStorage.setItem('users',JSON.stringify(allusers))
},[allusers])

()=>handleChange is a function that takes no arguments and returns the handleChange function. You probably want () => handleChange(), which would take no arguments and INVOKE handleChange.

There were a lot of syntactical errors and use of functions like save which was never declared and still used.

I rewrote the whole example and made it a bit modular so that you can comprehend it better.

Here is the working example:

Final Output:

Full Source code:

import React, { useState, useEffect } from "react";
import "./style.css";
const App = () => {
  const [allusers, setAllusers] = useState([]);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleName = e => {
    setName(e.target.value);
  };

  const handleEmail = e => {
    setEmail(e.target.value);
  };
  const save = e => {
    e.preventDefault();
    let newUsers = {
      id: Math.floor(Math.random() * 100000),
      name: name,
      email: email
    };
    localStorage.setItem("users", JSON.stringify([...allusers, newUsers]));
    setAllusers(allusers.concat(newUsers));

    console.log("Localstorage:", JSON.parse(localStorage.getItem("users")));
  };

  useEffect(() => {
    console.log("Localstorage:", JSON.parse(localStorage.getItem("users")));
    if (localStorage.getItem("users")) {
      setAllusers(JSON.parse(localStorage.getItem("users")));
    }
  }, []);

  return (
    <div>
      <form>
        <input type="text" name="user" onChange={handleName} />
        <input type="text" name="email" onChange={handleEmail} />
        <button onClick={save}>Save</button>
        <p>{JSON.stringify(allusers)}</p>
      </form>
    </div>
  );
};

export default App;

As You inquired in the comment section, here is how you can implement the Update functionality:

Final Output:

Full source code:

import React, { useState, useEffect } from "react";
import "./style.css";
const App = () => {
  const [allusers, setAllusers] = useState([]);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [id, setId] = useState(null);

  const handleName = e => {
    setName(e.target.value);
  };

  const handleEmail = e => {
    setEmail(e.target.value);
  };
  const save = e => {
    e.preventDefault();
    let newUsers = {
      id: Math.floor(Math.random() * 100000),
      name: name,
      email: email
    };
    localStorage.setItem("users", JSON.stringify([...allusers, newUsers]));
    setAllusers(allusers.concat(newUsers));
    console.log("Localstorage:", JSON.parse(localStorage.getItem("users")));
  };

  const setForUpdate = user => {
    setName(user.name);
    setEmail(user.email);
    setId(user.id);
  };

  const update = e => {
    e.preventDefault();
    let modifiedData = allusers.map(user => {
      if (user.id === id) {
        return { ...user, name: name, email: email };
      }
      return user;
    });

    setAllusers(modifiedData);
    localStorage.setItem("users", JSON.stringify(modifiedData));
    setId(null);
  };
  useEffect(() => {
    console.log("Localstorage:", JSON.parse(localStorage.getItem("users")));
    if (localStorage.getItem("users")) {
      setAllusers(JSON.parse(localStorage.getItem("users")));
    }
  }, []);

  return (
    <div>
      <form>
        <input value={name} type="text" name="user" onChange={handleName} />
        <input value={email} type="text" name="email" onChange={handleEmail} />
        <button disabled={!(id == null)} onClick={save}>
          Save
        </button>
        <button disabled={id == null} onClick={update}>
          Update
        </button>
      </form>
      {allusers &&
        allusers.map(user => (
          <div className="userInfo">
            <p>{user.name}</p>
            <p>{user.email}</p>
            <button onClick={() => setForUpdate(user)}>
              select for update
            </button>
          </div>
        ))}
    </div>
  );
};

export default App;

You can find the working example here: Stackblitz