conditional rendering not working in my code-CodePudding

I am trying to verify mobile number. I am taking mobile number form user if user mobile number is matched with mobile number the say verified otherwise not verified

{ 91821024343 === user.phoneNumber ? "Verified" :" Not Verified"}

but this method is not working . i am using react with firebase. firebase used authentication

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.0.0/react-dom.min.js"></script>


const Login = () => {
    // Inputs
    const [mynumber, setnumber] = useState("");
    const [otp, setotp] = useState('');
    const [show, setshow] = useState(false);
    const [final, setfinal] = useState('');

    // Sent OTP
    const signin = () => {

        if (mynumber === "" || mynumber.length < 10) return;

        let verify = new firebase.auth.RecaptchaVerifier('recaptcha-container');
        auth.signInWithPhoneNumber(mynumber, verify).then((result) => {
            setfinal(result);
            alert("code sent")
            setshow(true);
        })
            .catch((err) => {
                alert(err);
                window.location.reload()
            });
    }

    // Validate OTP
    const ValidateOtp = () => {
        if (otp === null || final === null)
            return;
        final.confirm(otp).then((result) => {
            // success
        }).catch((err) => {
            alert("Wrong code");
        })
    }
    const [user] = useAuthState(auth);

    
    return (
        
        <div style={{ "marginTop": "200px" }}>
            <center>
                <div style={{ display: !show ? "block" : "none" }}>
                    <input value={mynumber} onChange={(e) => {
                    setnumber(e.target.value) }}
                        placeholder="phone number" />
                    <br /><br />
                    <div id="recaptcha-container"></div>
                    <button onClick={signin}>Send OTP</button>
                </div>

                {user.phoneNumber===" 91821024343" ? "Varified" :" Not Varified"}
                
            
                {user ? "Varified" :" Not Varified"}
            
                {user.phoneNumber}
                <div style={{ display: show ? "block" : "none" }}>
                    <input type="text" placeholder={"Enter your OTP"}
                        onChange={(e) => { setotp(e.target.value) }}></input>
                    <br /><br />
                    <button onClick={ValidateOtp}>Verify</button>
                </div>
            </center>
        </div>
    );
}
export default Login;

Here these statements are working. {user ? "Varified" :" Not Varified"} {user.phoneNumber}

i added full page snippet here

CodePudding user response：

const [verified,setVerified]=useState("")
useEffect(() => {
let unsubscribe;

if (user.phoneNumber===" 91821024343") {
 setVerified("verified")
  
} else {
setVerified("not verified")
}

return unsubscribe;
}, [user]);


<div style={{ "marginTop": "200px" }}>
        <center>
            <div style={{ display: !show ? "block" : "none" }}>
                <input value={mynumber} onChange={(e) => {
                setnumber(e.target.value) }}
                    placeholder="phone number" />
                <br /><br />
                <div id="recaptcha-container"></div>
                <button onClick={signin}>Send OTP</button>
            </div>

            {verified}
            
        
            {user ? "Varified" :" Not Varified"}
        
            {user.phoneNumber}
            <div style={{ display: show ? "block" : "none" }}>
                <input type="text" placeholder={"Enter your OTP"}
                    onChange={(e) => { setotp(e.target.value) }}></input>
                <br /><br />
                <button onClick={ValidateOtp}>Verify</button>
            </div>
        </center>
    </div>

CodePudding user response：

There are not enough details in the question, but I guess the reason can be in 91821024343 === user.phoneNumber part, if the phone number is 91821024343. In JavaScript, 91821024343 is 91821024343, a number. " " sign isn't considered as a part of a number. " " converts string to number. Try using " 91821024343" as a string.