Andrew's Digital Garden

Conditional render props

Using conditional render props allows for more control in consuming components, but only when it's required. The rest of the time React.cloneElement or children can be returned instead.

return ( typeof children === 'function' ? children(additionalProps) : React.cloneElement(children, additionalProps) // or just `children` )

Note: material-ui does this for some of their components.

[[20221205104221-render-props-pattern]]

[[components]] [[react]] [[reactapi]]

Conditional render props