Question 73802 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 
    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>
  );
}

  2. 0

    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>
    Login or Signup to reply.
  3. 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>
    );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search