Conditional Rendering With Record

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 = ()