Conditional Component Rendering Tips

#react #typescript #javascript #jsx

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}</>
 }

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>} 
   />
 )