Conditionals.jsx

str // strings
<Cmp /> // components
<Cmp {...{ a, b, }} /> // instead of a={a} b={b}. yes, it's less performant

foo && <Cmp /> // shows if truthy
foo === somevalue && <Cmp /> // shows if foo is somevalue

!foo && <Cmp /> // shows if falsy
foo !== somevalue && <Cmp /> // shows if foo is not somevalue

arr.length > 0 && <Cmp /> // shows if array has at least 1 item
arr.length === 0 && <Cmp /> // shows if array is empty

arr.map(({ id }) => <Cmp key={id} />) // renders array

foo ? <CmpA /> : <CmpB /> // show CmpA if foo is truthy, CmpB if not

{
  caseA: () => <CmpA />,
  caseB: () => <CmpB />,
  undefined: () => <CmpC />
}[switchValue]() // an inline switch of components based on switchValue

condA ? (
  <CmpA />
) : condB ? (
  <CmpB />
) : condC ? (
  <CmpC />
) : (
  <CmpD />
) // chained ternaries - just think of them as else-ifs