如何将 useState state 传递给另一个组件？

Question

There are two components

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;

Clicking the "Sign Up" button in WelcomePage.jsx using useState navigates to SignUpPage.jsx

Question - How can I return back to WelcomePage.jsx on the "Back" button (I understand that I need to return false back to const [signUp, toSignUp] = useState(), but I don't know how to transfer state from WelcomePage to SignUpPage and vice versa.)

Answer 1

You can pass it via props from parent to child component. And pass the setState from child component to parent.

import { useState } from "react";

import SignUpPage from "./SignUpPage";

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

  function signUpClick() {
    toSignUp(true);
  }

  return (
    <>
      {signUp ? (
        <SignUpPage isOpen={signUp} setOpen={setSignUp} />
      ) : (
        <div>
           ... component
        </div>
      )
    </>
  );
}

export default WelcomePage;

function SignUpPage(props) {
  const { isOpen, setOpen } = props;

  return (
    <>
      {isOpen}
      <button onClick={setOpen(true)}>Open</button>
      <button onClick={setOpen(false)}>Close</button>
    </>
  );
}

export default SignUpPage;