React values don't get updated on another page (useState)

Question

I have a problem with my React app. I am trying to rewrite the code using React Hooks. But while using useState Hook my values won't get updated on the "Overview" page like they used to with setState . Code excerpts below. App.js:

const App = () => {
  const [values, setValues] = useState({
    name: "",
    email: "",
    phone: "",

    schoolName: "",
    studyTitle: "",
    completion: "",
    studyStartDate: "",
    studyEndDate: "",

    companyName: "",
    positionTitle: "",
    mainTasks: "",

    isFormSaved: false,
    btnText: "Save info"
  });

  const handleButtonClick = () => {
    setValues({
      isFormSaved: !values.isFormSaved
    });

    if (!values.isFormSaved) {
      setValues((values) => ({ ...values, btnText: "Edit info" }));
    } else {
      setValues((values) => ({ ...values, btnText: "Save info" }));
    }
  };

  const handleChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };

  const overview = (
    <section className="overview">
      <Overview data={values} />
    </section>
  );

  const form = (
    <section className="editInfo">
      <GeneralInfo
        onChange={handleChange}
        disabled={values.isFormSaved}
        placeholder={values}
      />
      <Experience
        onChange={handleChange}
        disabled={values.isFormSaved}
        placeholder={values}
      />
      <Practice
        onChange={handleChange}
        disabled={values.isFormSaved}
        placeholder={values}
      />
    </section>
  );

  return (
    <div className="app">
      <h1>CV Application</h1>
      {values.isFormSaved ? overview : form}
      <button onClick={handleButtonClick}>{values.btnText}</button>
    </div>
  );
};

export default App;

Overview.js:

export default function Overview(values) {
  return (
    <div>
      <section>
        <h2>Personal information</h2>
        <p>Name: {values.data.name}</p>
        <p>Email: {values.data.email}</p>
        <p>Phone Number: {values.data.phone}</p>
      </section>
      <section>
        <h2>Educational experience</h2>
        <p>School name: {values.data.schoolName}</p>
        <p>Title of study: {values.data.studyTitle}</p>
        <p>Graduated: {values.data.completion}</p>
        <p>
          Date of study: {values.data.studyStartDate} -{" "}
          {values.data.studyEndDate}
        </p>
      </section>
      <section>
        <h2>Practical Experience</h2>
        <p>Company name: {values.data.companyName}</p>
        <p>Position title: {values.data.positionTitle}</p>
        <p>Main tasks: {values.data.mainTasks}</p>
      </section>
    </div>
  );
}

And one of the component files - Practice.js:

export default function Practice(values) {
  return (
    <form>
      <fieldset>
        <legend>
          <strong>EXPERIENCE</strong>
        </legend>
        <label>
          Company name:
          <input
            type="text"
            id="companyName"
            onChange={values.onChange}
            disabled={values.disabled}
            placeholder={values.placeholder.companyName}
          />
        </label>
        <label>
          Position:
          <input
            type="text"
            id="positionTitle"
            onChange={values.onChange}
            disabled={values.disabled}
            placeholder={values.placeholder.positionTitle}
          />
        </label>
        <label>
          Main tasks:
          <input
            type="text"
            id="mainTasks"
            onChange={values.onChange}
            disabled={values.disabled}
            placeholder={values.placeholder.mainTasks}
          />
        </label>
      </fieldset>
    </form>
  );
}

Should I use useEffect to have the values' change reflecte don my site?

Thanks in advance for answers.

Answer 1

I think the problem is in setState asynchronicity. If you call setState, it is asynchronous and the state value is not immediately available.

const handleButtonClick = () => {
    setValues(prevValues => {
    if (!prevValues.isFormSaved) {
      return ({ ...prevValues, isFormedSaved: true, btnText: "Edit info" });
    } else {
      return ({ ...prevValues, isFormedSaved: false, btnText: "Save info" });
    }
  };

I am only not sure if I understood your app logic well, so check it well.