Let's say you're writing your latest React component, and the work is flying. You're getting all the features of the component out, you have just the right amount of arguments or options, or so you think. Do you? Typically you might write a small component with some props as arguments. Let's say a element. Navbar interface INavbarProps {
  transparent?: boolean
  shadow?: boolean
} { ( )
} export export ( ) function Navbar props: INavbarProps return {...} < > nav </ > nav This is great, you've declared you're giving the option of the component being transparent, or having a shadow (or both). Now, what about links? Navbars typically have links. Well, you might go with a simple and straight-forward solution; you may use another prop as an array or record of some kind like so. interface INavbarLink { : string
  url: string
} interface INavbarProps {
  transparent?: boolean
  shadow?: boolean
  links?: INavbarLink[]
} { ( )
} export title export export default ( ) function Navbar props: INavbarProps return {...} < > nav </ > nav We add an interface of and give it the following properties, and , then give a prop for an array. Then we can handle the rest similar to the following implementation. INavbarLink title url { (
    <nav>
      {props.links.map( (
        <a key={i} href={e.url}>{e.title}< nav>
  )
} export default ( ) function Navbar props: INavbarProps return ( ) => e, i /a>
      )}
    </ This simply adds an anchor element for every link. Great! You've taken an argument and rendered your list of links. Let's see what the implementation looks like: { (
    <Navbar
      links={[
        { title: , url: },
        { title: , url: }
      ]}
    />
  )
} export ( ) function MainPage return 'Home' '/' 'Search' '/search' But what if the user actually wants to render a element, or even a , or maybe something else? Well, you could add special cases to your interface like so. Link button INavbarLink {
  title: url: onClick?: } { (
    <nav>
      {props.links?.map( e.onClick ? (
          <button = onClick={e.onClick}>
            {e.title}
          < a>
        )
      )}
    < export interface string string => () void export default ( ) function Navbar props: INavbarProps return ( ) => e, i type 'button' /button>
        ) : (
          <a href={e.url}>{e.title}</ /nav>
  )
} Ok great, you're rendering a button if there is an and an anchor tag if there isn't. So you've given some flexibility to let the user render the type of component they want. But what if the user wants to attach a to it? Or maybe specify a different (such as submit for the button)? You could keep adding more and more props to the interface. onClick className/styles type But let me introduce you to , . With you can let the user specify a whole component as an argument. Instead of an array of properties, an array of JSX components! React.cloneElement the better way cloneElement Let's rearrange the interface and first see what that would look like, passing in JSX components instead of an array of objects. { (
    <Navbar
      links={[
        <a href= >Home< button>
      ]}
    />
  )
} export ( ) function MainPage return '/' /a>,
        <button type='button'>Search</ Wouldn't this be great? Letting users pass in whatever components they want. You're really designating the components are rendered but you're taking them as is. The users could even add styles to their button, or a special class to their anchor element without more props! where Let's see what this looks like to implement in Typescript. If you're using Javascript ES6, you can simply remove the types. React, { ReactElement} INavbarProps {
  transparent?: shadow?: links?: ReactElement[]
} { (
    <nav>
      {props.links?.map( e
      )}
    < import from 'react' export interface boolean boolean export default ( ) function Navbar props: INavbarProps return ( ) => e, i /nav>
  )
} Yup! It really is that simple! You've successfully let the user give whatever component they want to render into the Navbar. Keep in mind that there are definitely some things you need to add to the element to support any element inside of the Navbar, such as a margin to separate items. Let's do that with . This will let you add properties to the components passed into the props. React.cloneElement React, { ReactElement, cloneElement } { ( )
} import from 'react' export default ( ) function Navbar props: INavbarProps return {props.links?.map((e, i) =>
        cloneElement(e, {
          style: {
            marginLeft: '10px'
          }
        })
      )} < > nav </ > nav That's all there is to it! Pass the element into and add whatever additional props you want. You can also detect existing props and merge your styles, classNames, etc. into the props very easily. A more complete and final implementation might look like this: cloneElement React, { ReactElement, cloneElement } interface INavbarProps {
  transparent?: boolean
  shadow?: boolean
  links?: ReactElement<HTMLElement>[]
} { ( )
} { ( <a href='/' className='link-primary'>
          Home
        </a> <button type='button' className='btn-primary'>
          Search
        </button> import from 'react' export export default ( ) function Navbar props: INavbarProps return {props.links?.map((e, i) =>
        cloneElement(e, {
          className: `ml-2 ${e.props.className || ''}`
        })
      )} < > nav </ > nav export ( ) function MainPage return < = Navbar links {[ , ]}
    />
  )
} Next time, instead of reaching for more and more props, consider whether the user would perhaps want to pass a whole component instead. You get the final say and can make changes to that component. That way you can support all manner of different kinds of components, but still get the flexibility to alter them, and make it easier and better to use your component API. Gaurav Khanna is a software engineer, previously working at Google and other top Silicon Valley Startups with over a decade of experience developing scalable apps. Follow him on Twitter @gvkhna .

React cloneElement: A Better Way to Build a Component API Props in ES6 Javascript and Typescript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

113 Stories To Learn About Api Development

21 API Monitoring Tools That Will Make You a Developer Superhero in 2023!

184 Stories To Learn About Rest Api

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

113 Stories To Learn About Api Development

21 API Monitoring Tools That Will Make You a Developer Superhero in 2023!

184 Stories To Learn About Rest Api

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps