Conditional Rendering With Record • Shiyu's Hideout

Description

Creates a type-safe conditional rendering pattern using Record type to map union types to React components.

This approach eliminates the need for switch statements or multiple conditional renders, providing a clean and maintainable solution for rendering different components based on a prop value.

Code

import { type ReactNode } from 'react'
 
type Fruit = 'apple' | 'kiwi' | 'cherry' | 'grape'
 
const Apple = () => <span>🍎</span>
const Kiwi = () => <span>🥝</span>
const Cherry = () => <span>🍒</span>
const Grape = () => <span>🍇</span>
 
const icon: Record<Fruit, ReactNode> = {
  apple: <Apple />,
  kiwi: <Kiwi />,
  cherry: <Cherry />,
  grape: <Grape />,
}
 
export const ConditionalFruitFacts = ({ fruit }: { fruit: Fruit }) => {
  return <>{icon[fruit]}</>
}

JSX

Usage

This pattern is particularly useful when you have a finite set of options that need to render different components or content.

function App() {
  return (
    <div>
      <ConditionalFruitFacts fruit="apple" />
      <ConditionalFruitFacts fruit="kiwi" />
      <ConditionalFruitFacts fruit="cherry" />
    </div>
  )
}

TSX