i have this function :

function CreateSCACtion() {
  localStorage.setItem("state", 0);
  localStorage.setItem("trigger", "Si Ceci");
  localStorage.setItem("reaction", "Alors Cela");
  const [trigger, setTrigger] = useState(localStorage.getItem("trigger"));
  const [reaction, setReaction] = useState(localStorage.getItem("reaction"));
  const [state, setState] = useState(localStorage.getItem("state"));

  const handleChangeState = (state) => {
    setState(state);
    localStorage.setItem("state", state);
  }

  console.log("state "   state);
  console.log("trigger "   trigger);
  console.log("reaction "   reaction);
  if (state == 0) {
    return (
      <div className="create-scaction">
        <div className="scac-box">
          <Button text={localStorage.getItem("trigger")} redirect={() => handleChangeState(1)}
          color="#282c34"
          borderradius="20px"
          fontsize="64px"
          fontweight="bold"
          height="100%"
          width="100%"
          />
        </div>
        <div className="scac-box">
          <Button text={localStorage.getItem("reaction")} redirect={() => handleChangeState(2)}
            color="#282c34"
            borderradius="20px"
            fontsize="64px"
            fontweight="bold"
            height="100%"
            width="100%"
          />
        </div>
        <Button text="GO !" height="50px" width="50px" />
      </div>
    );
  } else if (state == 1) {
    console.log("state 1 "   localStorage.getItem("trigger"));
    console.log("state 1 "   localStorage.getItem("reaction"));
    console.log("state 1 "   localStorage.getItem("state"));
    return (
      <div className="states">
        <SearchBar />
        <div className="states-services">
          <GetServices />
        </div>
      </div>
    )
  } else if (state == 2) {
    console.log("state 2 "   localStorage.getItem("trigger"));
    console.log("state 2 "   localStorage.getItem("reaction"));
    console.log("state 2 "   localStorage.getItem("state"));
    return (
      <div className="states">
        <SearchBar />
        <div className="states-services">
          <GetServices />
        </div>
      </div>
    )
  }
}

this function generates 2 button : the first one has "Si Ceci" as text and the other one has "Alors Cela", when you click on the buttons it shows a bunch of different buttons that represents services ( google calendar, android sms etc...) like IFTTT, when you click on a service it reloads the page and it redisplays the button but the text has changed for the title of the choosen service, my problem is that it doesn't change the text in the bu ttons because when it reloads the page it resets the item in the storage which is normal and i understand why but i don't know how to fix it. Here's how it looks :

CodePudding user response：

During setItem use previous value if extsits

localStorage.setItem("state", localStorage.getItem("state") ?? 0);

or set it only if it doesn't exists

if (localStorage.getItem("state") === undefined) {
  localStorage.setItem("state", 0)
}