Nested ternary operator for react components-CodePudding

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

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

return <Checked/>

}

else if (is_completed) {

return <Checked/>
}

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

return <NotChecked/>
}

This was my change :

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

}

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

Thanks

CodePudding user response：

You don't even need a nested Ternary; the first 2 conditions return the same <Checked/> component:

return (value === 'bank' && is_valid_iban && is_completed) || is_completed ? <Checked/> : <NotChecked/>;

You could probably simplify this further since you're checking is_completed twice, once with extra conditions, once without, but regardless; no nesting required.

CodePudding user response：

Make it Simple:

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