反应组件的嵌套三元运算符

Question

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

Answer 1

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

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

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

Using a standard if..else structure:

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

Using ternary ?:

return (
  ((value === 'bank' && is_valid_iban) || is_completed)
  ? <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 ?: .

Answer 2

Make it Simple:

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