Как передать состояние useState в другой компонент?

Question

[JekaHC]

Есть два компонента.

WelcomePage.jsx

import { useState } from "react";

import SignUpPage from "./SignUpPage";

function WelcomePage() {
  const [signUp, toSignUp] = useState(false);

  function signUpClick() {
    toSignUp(true);
  }

  return (
    <div>
      {signUp ? (
        <SignUpPage isOpen={signUp} />
      ) : (
        <div
          className="Welcome_page__container animate__animated animate__fadeIn"
          id="welcome_page"
        >
          <h1 className="Welcome_page__title">Welcome to Hotel Review </h1>
          <h3 className="Welcome_page__subtitle">Sign in :</h3>
          <div className="Welcome_page__wrapper">
            <label className="Welcome_page__input-title" htmlFor="welcome_mail">
              E-mail:
            </label>
            <input
              className="Welcome_page__input"
              id="welcome_mail"
              type="mail"
              placeholder="Your e-mail..."
            />
            <label className="Welcome_page__input-title" htmlFor="welcome_pass">
              Password:
            </label>
            <input
              className="Welcome_page__input"
              id="welcome_pass"
              type="text"
              placeholder="Your password..."
            />
            <button className="Welcome_page__btn">Login</button>
            <button className="Welcome_page__btn" onClick={signUpClick}>
              Sign Up
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

export default WelcomePage;

SignUpPage.jsx

function SignUpPage() {
  return (
    <div className="Welcome_page__container animate__animated animate__fadeIn">
      <button>Back...</button>
      <h1 className="Welcome_page__title">Welcome to Hotel Review </h1>
      <h3 className="Welcome_page__subtitle">Sign up :</h3>
      <div className="Welcome_page__wrapper">
        <label className="Welcome_page__input-title" htmlFor="welcome_mail">
          E-mail:
        </label>
        <input
          className="Welcome_page__input"
          id="welcome_mail"
          type="mail"
          placeholder="Your e-mail..."
        />
        <label className="Welcome_page__input-title" htmlFor="welcome_pass">
          Password:
        </label>
        <input
          className="Welcome_page__input"
          id="welcome_pass"
          type="text"
          placeholder="Your password..."
        />
        <label
          className="Welcome_page__input-title"
          htmlFor="welcome_pass"
        ></label>
        <input
          className="Welcome_page__input"
          id="welcome_pass_repeat"
          type="text"
          placeholder="Repeat password..."
        />
        <button className="Welcome_page__btn_2">Sign Up</button>
      </div>
    </div>
  );
}

export default SignUpPage;

При нажатии на "Sign Up" кнопку в WelcomePage.jsx при помощи useState происходит переход на SignUpPage.jsx.

Вопрос - как на кнопке "Back" сделать возврат обратно на WelcomePage.jsx. Я понимаю, что нужно вернуть false обратно в const [signUp, toSignUp] = useState(), но не знаю как передать состояние из WelcomePage в SignUpPage и наоборот.

Answer 1

[HealSpirit]

Нужно в SignUpPage добавить пропс с функцией (либо напрямую передать toSignUp либо добавить аналог signUpClick, только с false) в самом компоненте у кнопки "Back ..." добавить пропс onClick и прокинуть функцию из пропс
Ps. Зачем передавать пропс isOpen, если он не используется? На перспективу разделил бы эти 2 страницы и использовал бы react-router