Why is my useState not working (error in console)?

Question

I have react 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={toSignUp} back={toSignUp} />
      ) : (
        <div className="Welcome_page__container animate__animated animate__fadeIn">
          <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
              value={inputEmail}
              onInput={(e) => setInputEmail(e.target.value)}
              className="Welcome_page__input"
              id="welcome_mail"
              type="email"
              placeholder="Your e-mail..."
            />
            <label className="Welcome_page__input-title" htmlFor="welcome_pass">
              Password:
            </label>
            <input
              value={inputPass}
              onInput={(e) => setInputPass(e.target.value)}
              className="Welcome_page__input"
              id="welcome_pass"
              type="password"
              placeholder="Your password..."
            />
            <button className="Welcome_page__btn" onClick={loginClick}>
              Login
            </button>
            <button className="Welcome_page__btn" onClick={signUpClick}>
              Sign Up
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

export default WelcomePage;

SignUpPage.jsx

import { useState } from "react";
import { Hotels } from "./Hotels";

function SignUpPage(props) {
  const { isOpen, back } = props;
  const [isSignUp, setSignUp] = useState(false);

  return (
    <div>
      {isSignUp ? (
        <Hotels />
      ) : (
        <div className="Welcome_page__container animate__animated animate__fadeIn">
          <button onClick={back(false)}>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
              value={inputEmail}
              onInput={(e) => setInputEmail(e.target.value)}
              className="Welcome_page__input"
              id="welcome_mail"
              type="email"
              placeholder="Your e-mail..."
            />
            <label className="Welcome_page__input-title" htmlFor="welcome_pass">
              Password:
            </label>
            <input
              value={inputPass}
              onInput={(e) => setInputPass(e.target.value)}
              className="Welcome_page__input"
              id="welcome_pass"
              type="password"
              placeholder="Your password..."
            />
            <label
              className="Welcome_page__input-title"
              htmlFor="welcome_pass"
            ></label>
            <input
              value={inputPass2}
              onInput={(e) => setInputPass2(e.target.value)}
              className="Welcome_page__input"
              id="welcome_pass_repeat"
              type="password"
              placeholder="Repeat password..."
            />
            <button className="Welcome_page__btn_2">Sign Up</button>
          </div>
        </div>
      )}
    </div>
  );
}

export default SignUpPage;

When I click on Back in the SignUpPage component I get an error -

It is necessary that after clicking on back there is a return to WelcomePage.jsx

Maybe I'm not using or passing useState in SignUpPage.jsx

I read about the error on the Internet, they say that you need to useEffect (), but I doubt that this is the problem ...

Answer 1

Here is the error:

<button onClick={back(false)}>Back...</button>

You are basically calling the back function immediately causing the WelcomePage component to update while rendering the SignUpPage component. You should do this:

<button onClick={() => back(false)}>Back...</button>

By doing this you are going to execute the back function only when you click on the button