Conditional inside React function returns incorrect value-CodePudding

With my first project to get familiar with React, I am a trying to create a webpage that requires the correct password to view the content. For some reason, the conditional I've created inside of my react function to check if the password entered (pwd) matches the correct password (pass) returns false to the console when it should return true. Can someone explain why this is happening?

export default function LoginUser() {

    const pass = 5

    const [pwd, setPwd] = useState('');
    const [success, setSuccess] = useState(null);

    const handleChange = async (e) => {
        setPwd(e.target.value);
        pwd === pass ? setSuccess(true) : setSuccess(false);      
        
    }

    const handleClick = async (e) => {
        e.preventDefault();
        console.log('password is', pwd)
        console.log('attempt is', success)
    }
    return (
        <div>
            <h1>Enter Password</h1>
            <form>
                <label htmlFor="Password"></label>
                <input
                    type="password"
                    id="password"
                    onChange={handleChange}
                    value={pwd}
                />
                <button onClick={handleClick}>Submit</button>
            </form>
        </div>  
    )
}

CodePudding user response：

pass is 5, a number, whereas the input pwd is a string. Comparing a number and a string with === will return false.

You should try this (the before pwd will turn it into a number): pwd === pass ? setSuccess(true) : setSuccess(false)

CodePudding user response：

A few things that might help with this. Maybe changing the functions to not be async might help. They can fire with each press and don't need to be asynchronous.

Also why not set the success in the handle click function so that the onChange event only handles the change. Instead of setting the useState for the boolean to null you can set it to false and change to true if the passwords match.

The double equals will perform type coercion on the 2 values so you will need to either use the == which is not the way you would want to do this normally or you could convert the type before testing for equality. I set it to double == here in the code to make it easy for this run.

I modified the code and pasted below. Don't forget the imports import React, {useState, useEffect} from 'react' at the top of your project.

I also included a useEffect to watch when the value of the success changes for you to see the console log.

export default function LoginUser() {

    const pass = 5

    const [pwd, setPwd] = useState('');
    const [success, setSuccess] = useState(false);

    const handleChange = (e) => {
        setPwd(e.target.value);        
    }

    const handleClick = (e) => {
        e.preventDefault();
        pwd == pass && setSuccess(!success);
        console.log('password is', pwd);
    }
    
    //useEffect will need imported with useState! You can delete after seeing it works
    useEffect(() => {
      console.log("Attempt is ", success);
    }, [success])
    
    
    return (
        <div>
            <h1>Enter Password</h1>
            <form>
                <label htmlFor="Password"></label>
                <input
                    type="password"
                    id="password"
                    onChange={handleChange}
                    value={pwd}
                />
                <button onClick={handleClick}>Submit</button>
            </form>
        </div>  
    )
}