zapolnoch / choose

First element matching a boolean condition:

npm i choose-matching

const Component = () => (
  <section>
    <header></header>
    <nav>
      {choose(
        [test === "blue", <BlueButton />],
        [test === "green", <GreenButton />],
        [true, <Button />],
      )}
    </nav>
  </section>
)

Why?

Because if statement is a statement, but here we expect an expression.

Alternatives

Self-invoking function

<div>
  {(() => {
    switch (test) {
      case "blue":
        return <BlueButton />
      case "green":
        return <GreenButton />
      default:
        return <Button />
    }
  })()}
</div>

Pattern matching

Based on TC39 proposal or ts-pattern:

match (test) {
  when ("blue"): <BlueButton />
  when ("green"): <GreenButton />
  default: <Button />
}

Modern way

Use languages in which if and switch are expressions, e.g. Civet.