DEV Community

Ryohlan
Ryohlan

Posted on

1 1

Conditional Component Rendering Tips

How do you write a code if you want to render a component by some conditions?

Following is a my way.

It's TypeScript friendly!

 const If = <T extends string>(props: { 
   type: T, 
   [key in T]: ReactNode, 
   else: ReactNode 
 }) => {
   return <>{props[props.type] || props.else}</>
 }
Enter fullscreen mode Exit fullscreen mode

Usage

type UserRole = 'admin' | 'developer' | 'manager' 
 export const UserRoleView = (props: { role: UserRole }) => (
   <If 
    type={props.role} 
    admin={<div>admin</div>} 
    developer={<div>developer</div>} 
    manager={<div>manager</div>} 
    else={<div>No role</div>} 
   />
 )

Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up