tsx conditionals exposes two components:
For
& If
- Eliminate exposed control flow logic in your components
- Reduce mixing Javascript/Typescript and JSX/TSX in a view component
- Improve readability
{data.map(item => <Component key={item.key} />)}
{data && data.map(item => <Component key={item.key} />)}
{open && <Component />}
{open ? <ComponentA /> : <ComponentB />}
data: T[] | null
render: (item: T) => JSX.Element | React.FC
cond: boolean
then: JSX.Element
orElse: JSX.Element | null