How can I implement a nested if-else statement in ReactJS JSX

Question

Can you tell me How can I implement a nested if-else statement in ReactJS JSX?

Answer 1

You can use ternary operators or by defining conditions before returning JSX.

Example: Using Ternary Operator

function Status({ age }) {

    return (

        <div>

            {age >= 18 ? (

                age >= 60 ? <p>Senior Citizen</p> : <p>Adult</p>

            ) : (

                <p>Minor</p>

            )}

        </div>

    );

}

Example: Using a Separate Function

function getStatus(age) {

    if (age >= 18) {

        return age >= 60 ? "Senior Citizen" : "Adult";

    } else {

        return "Minor";

    }

}

function Status({ age }) {

    return <p>{getStatus(age)}</p>;

}