Why if-else is not working in this react code, cause I am not getting output?

Question

I was trying to achieve something like this in react e.g. user enter his/her age and when click the button following logic should work

if age>18 then Eligible for Passport else Not eligible

But I am getting no output when I enter the age and click the Enter button.

import { useState } from "react";



function App() 
{
    const[age,`your text`setAge]=useState(0)
    const handleInput= (event)=>{setAge(event.target.value)}

    const Checker = ()=>{
    if(age>18){
      return <h1>Eligible for Cnic</h1>
    }else{
      return <h1>Not-Eligible for Cnic</h1>
    }
    }
  
    return (
    <div className="App">
    <input type="text" onChange={handleInput}/>
    <button onClick={()=><Checker/>}>Check</button>
    {/* <Checker/> */}
    </div>
  );
}
``your text``
export default App;

This code is showing no output when button click is used but without button click it shows the output

Why is your `checker` returning JSX instead of calling a setState for a variable that you then use in your actual return? — Mike 'Pomax' Kamermans, Feb 24 '23 at 16:25
Actually I want an input field and a submit button, when user input his age then he/she click on button after then the output is shown. — Syed Usman Hassan, Feb 24 '23 at 16:28

0stone0 · Answer 1 · 2023-02-24T16:46:31.877

You can't return a DOM element from an onChange event, nothing will be done with the returned value.

There are much better ways of doing this.

As requested by OP in the comment, I've

Added a result useState where we save the string you want to show
```
const [result, setResult] = useState(null);
```
On button click, call onButtonClick that will use the setResult hook to save the result with you if statement, that I've changed to an inline variant
```
const onButtonClick = () => 
    setResult((age > 18) 
        ? 'Eligible for Cnic' 
        : 'Not-Eligible for Cnic');
```
If result is a true value, show result wrapped in h1
```
{result && <h1>{result}</h1>}
```

Updated snippet:

const { useState } = React;

function App() {

    const [age, setAge] = useState(0);
    const [result, setResult] = useState(null);

    const handleInput = (event) => setAge(event.target.value);
    
    const onButtonClick = () => 
        setResult((age > 18) 
            ? 'Eligible for Cnic' 
            : 'Not-Eligible for Cnic');
    
    return (
        <div className="App">
            <input type="text" onChange={handleInput} />
            <button onClick={onButtonClick}>{'Check'}</button>
            {result && <h1>{result}</h1>}
        </div>
    );
}
  
ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

I would probably lower-case `Checker` to distinguish it from a component. — Andy, Feb 24 '23 at 16:13
Thanks you for your response but the problem is still there I don't want to change state run time entering the age and the output is there, e.g in the above code Can you add a submit button, when user add age then click on button then the output is shown — Syed Usman Hassan, Feb 24 '23 at 16:25
Not my favorite way of doing this, but I've update my answer with your idea. — 0stone0, Feb 24 '23 at 16:40

Mike 'Pomax' Kamermans · Accepted Answer · 2023-02-24T16:34:43.477

0

You almost certainly want a second state variable here, and then use that as part of your normal render.

import { useState } from "react";

export default function App() 
{
    const [age, setAge] = useState(0);
    const [verified, setVerified] = useState(false);

    const handleInput = ({ target }) => setAge(target.value);
    const verifyAge = () => setVerified(age > 18);
  
    return (
      <div className="App">
        <input type="text" onChange={handleInput} placeholder="Your age"/>
        <button onClick={verifyAge}>Check</button>
        <p>{verified? `` : `Not-`}Eligible for Cnic</p>
      </div>
    );
}

edited Feb 24 '23 at 16:34

answered Feb 24 '23 at 16:29

Mike 'Pomax' Kamermans

49,297
16
112
153

Thank you so much, this is what I wanted for practice as a beginner, Your logic is Great. God Bless you – Syed Usman Hassan Feb 24 '23 at 16:39

score 0 · Answer 3 · answered Feb 24 '23 at 18:35

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [age, setAge] = useState();
  const [verified, setVerified] = useState(false);
  const [btnClick, setBtnClick] = useState(false);
  const handleVerify = () => {
    setVerified(age > 18);
    setBtnClick(true);
  };
  return (
    <div className="App">
      <input
        type="text"
        placeholder="Enter Your Age"
        onChange={(event) => setAge(event.target.value)}
      />
      <button onClick={handleVerify}>Verify</button>
      <br />
      {btnClick ? <p>{verified ? `` : `Not `}Verified</p> : ``}
    </div>
  );
}

Why if-else is not working in this react code, cause I am not getting output?

3 Answers3

Updated snippet: