How to display different things based on the status of a boolean in reactjs-CodePudding

I am currently creating a login page that sends a POST request to an API authorising the validity of the users' entered credentials. I want the login page and the 'redirection' page to located within the same component in the react project. Once the API call is made, if the authorisation process is successful a boolean named successfulAuth is changed from false to true. I want the login form to display when this boolean is false, and the 'redirection' page to display when this boolean is true. I am not sure what the best way of doing this is as I am new to reactjs and cannot find/figure out a good way of making the component function in this way. The main reason why I want to do it this way is because the redirection page relies on the API response, and I am struggling to parse the response to a new component if I were to use something like 'useNavigation' and completely make a new project select component. Doing everything locally within the Login component allows me to use the API response in the redirection page.

function Login() {

  const nav = useNavigate();
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [appid, setAppid] = React.useState("");

  let gottenDetails = false;

  const api = new bimplusAPI();

  const handleSubmit = e => {
    e.preventDefault();
    console.log(email);
    console.log(password);
    console.log(appid);

    if (email !== "" && password !== "" && appid !== "") {
      gottenDetails = true;
    }

    let successfulAuth = false;
    if (gottenDetails) {
      api.authorise(email, password, appid).then((result) => {
        if (result.status === 200) {
          console.log("Auth Successful");
          successfulAuth = true;
          return result;

        } else {
          console.log("Auth Failed")
          return result;
        }
      });    
    }
  }

  return (
    <div className="app">

      {/* Display this form if 'successfulAuth' is false: */}
      <form onSubmit={handleSubmit}>
        <label for="email">Email: </label>
        <input type="text" id="email" name="email" onChange={e => setEmail(e.target.value)}></input><br></br>
        <label for="pass">Password: </label>
        <input type="text" id="pass" name="pass" onChange={e => setPassword(e.target.value)}></input><br></br>
        <label for="appid">App ID: </label>
        <input type="text" id="appid" name="appid" onChange={e => setAppid(e.target.value)}></input><br></br>
        <input type="submit" value="Submit"></input>
      </form>

      {/* Display this content if 'successfulAuth' is true: */}
      <h1>Project select page</h1>
      <p>Example HTML that should be displayed only if 'successfulAuth' === true</p>
    </div>
  );
}

export default Login

In summary, I want to display certain content if a boolean is false, and other content if the same boolean is true. Any suggestions are much appreciated. Many thanks in advance.

CodePudding user response：

Use a ternary operator

<div>
{succesfulAuth
  ? Your login form
  : The redirect
}
</div>