I want to e up with a nested if ternary operator with react ponents but am being challenged , this is my logic :

if (value==='bank' && is_valid_iban && is_pleted) {

return <Checked/>

}

else if (is_pleted) {

return <Checked/>
}

else if (value==='businessplan' && is_required) {

return <NotChecked/>
}

This was my change :

{
(!value=== 'bank' || is_valid_iban) &&
                is_pleted ? (<Checked/>) : (value ==='businessplan' && is_required && (<NotChecked/>))

}

What could be the best way of ing up with a ternary operator for the logic above.

Thanks

I want to e up with a nested if ternary operator with react ponents but am being challenged , this is my logic :

if (value==='bank' && is_valid_iban && is_pleted) {

return <Checked/>

}

else if (is_pleted) {

return <Checked/>
}

else if (value==='businessplan' && is_required) {

return <NotChecked/>
}

This was my change :

{
(!value=== 'bank' || is_valid_iban) &&
                is_pleted ? (<Checked/>) : (value ==='businessplan' && is_required && (<NotChecked/>))

}

What could be the best way of ing up with a ternary operator for the logic above.

Thanks

• javascript
• reactjs
• conditional-operator

• 3 want to e up with a nested if ternary operator -- I strongly strongly advice against doing this. Nested ternaries are much more difficult to read and understand leading to a higher possibility of bugs. if...else is more verbose, but is the better way to go. – Brian Thompson Commented Mar 29, 2022 at 14:28
• 1 That said, you can simplify your if...else's here. ((value==='bank' && is_valid_iban) || is_pleted) and then converting to a ternary is no longer nested. – Brian Thompson Commented Mar 29, 2022 at 14:29
• Hi @BrianThompson and , just realised I missed another if statement kindly check my post of the edit – Lutaaya Huzaifah Idris Commented Mar 29, 2022 at 14:52

2 Answers 2

This solution seeks to simplify the below given set of conditions:

if (value==='bank' && is_valid_iban && is_pleted) {
  return <Checked/>
} else if (is_pleted) {
  return <Checked/>
} else if (value==='businessplan' && is_required) {
  return <NotChecked/>
}

It is observed from the above that is_pleted is part of the first & second conditions. Something like this: ((A && B && C) || C) which can be represented as (A && B) || C.

Using a standard if..else structure:

if ((value === 'bank' && is_valid_iban) || is_pleted) return <Checked />
else if (value === 'businessplan' && is_required) return <NotChecked />
else return null;

Using ternary ?:

return (
  ((value === 'bank' && is_valid_iban) || is_pleted)
  ? <Checked />
  : (value === 'businessplan' && is_required)
    ? <NotChecked />
    : null
);

When using ?: please always indent the code so it is readable. Same applies for if else as well; however, the if else structure is a lot more readable than ?:.

Make it Simple:

  {(value === "bank" && is_valid_iban && is_pleted) || is_pleted ? (
    <Checked />
  ) : (value === "businessplan" && is_required) ? (
    <NotChecked />
  ) : (
    <NotChecked />
  )}