How to pass useState state to another component?

Question

JavaScript

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;

When you click on the "Sign Up" button in WelcomePage.jsx using useState, you go to SignUpPage.jsx

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

Answer 1

You need to add a prop with a function in SignUpPage (either directly pass toSignUp or add an analogue of signUpClick, only with false) in the component itself, at the "Back ..." button, add the onClick prop and pass the function from the
Ps prop. Why pass the isOpen prop if it's not being used? In the future, I would separate these 2 pages and use react-router