I am working on a user registration/ log in page. I have two forms, a signUp form and a logIn form, and some state called signInState that determines which user form to display. I have two buttons that toggle the signInState, and if the signInState is true, I want it to display the log in form, if its false, I want to display the sign up form. The state is changing, but for some reason the conditional rendering is not working. Can someone help me figure out why my toggleSignInState doesn't change what's being rendered on the page? Thanks

Here is my react code for the signInPage itself

import React from 'react'
import SignUp from './SignUp'
import LogIn from './LogIn'


export default function SignInPage() {
    const [signInState, setSignInState] = React.useState(true);

    function toggleSignIn(event) {
        console.log(event.target.id)
        setSignInState(event.target.id);
        /*setSignInState(event.target.value);*/
    }

    return (
        <div className="signInPage">
            <div className="signInPageFormContainer">
                <p>{signInState}</p>
                {!signInState && <SignUp /> }
                {signInState && <LogIn /> }
                <div className="signUpPageToggleContainer">
                    <button onClick={toggleSignIn} id='true'>Log In</button>
                    <button onClick={toggleSignIn} id='false'>Sign Up</button>
                </div>
            </div>
        </div>
    )
}

here is the code for the signUp form

import React from 'react'

export default function SignUp() {
    return(
            <form className="signUpForm">
                <input 
                    name="username"
                    type="text"
                    placeholder="Username"
                    className="signUpInput"
                />
                <input 
                    name="email"
                    type="text"
                    placeholder="Email"
                    className="signUpInput"
                />
                 <input 
                    name="password"
                    type="text"
                    placeholder="Password"
                    className="signUpInput"
                />
                 <input 
                    name="confirmPassword"
                    type="text"
                    placeholder="Confirm password"
                    className="signUpInput"
                />
                <div>
                    <button>Sign Up</button>
                    <button>Cancel</button>
                </div>
            </form>
    )
}

and here is the code for the log in form

import React from "react";

export default function LogIn() {
    /*functions for log in procedure*/




    return ( 
            <form className="logInForm">
                <input 
                    placeholder="Username"
                    name="username"
                    type="text"
                    id="username"
                    className="logInFormInput"
                
                />
                <input 
                    placeholder="Password"
                    name="password"
                    type="text"
                    id="password"
                    className="logInFormInput"
                
                />
                <div className="logInFormButtonContainer">
                    <button className="logInFormButton">Log In</button>
                    <button className="logInFormButton">Cancel</button>
                </div>
            </form>

    )
}

CodePudding user response：

Element attributes are strings. The string 'true' is not the same as the boolean true, and the string 'false' is not the same as the boolean false. Both 'true' and 'false' are truthy, so signInState is always truthy.

While you could perform string comparisons inside toggleSignIn to determine what to pass to the state setter, calling the state setter inline in the buttons would be easier.

<button onClick={() => { setSignInState(true); }}>Log In</button>
<button onClick={() => { setSignInState(false); }}>Sign Up</button>

CodePudding user response：

Here the id from event object will always be Boolean true as they are not booleans they are strings, i.e., whatever you keep as value in a DOM attribute it would be a string in most of the cases and any string except empty string "" is true ...

The answer from CertainPerformance is better and easy to understand

In case you want to keep your code same and changing a little as below should work

function toggleSignIn(event) {        
    setSignInState(event.target.id === "true" ? true : false);
}