Passed the button text to state, but text reverted back during page refresh in React hooks

Question

I have a record with two buttons, on click on Accept button should send the data back to server and display the text to Save and should not change the text afterwards ( should change only for clicked buttons). In the below example, it is changing the text during on click, which is fine, but while refreshing the page it set back the text to Accept. Could someone please advise on how can I fix this ?

import { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
  const [acceptPlayer, setAcceptPlayer] = useState("Accept");

  const postData = (e) => {
    const text = "Save";
    setAcceptPlayer(text);
  };
  return (
    <div className="App">
      <div>
        <button onClick={postData} value="accept">
          {acceptPlayer}
        </button>
      </div>
    </div>
  );
}

https://codesandbox.io/s/admiring-austin-1w1g38?file=/src/App.js

Answer 1

Of course, it would go back to Accept because react only stores state locally. So every time you refresh the page it will go back to its initial state.

So if you want to get the updated state in your component then you have to fetch the latest data from the database in useEffect and have to set it to a state.