Learn how to use the ‘branch’ and ‘renderNothing’ higher-order
components to render nothing when a certain prop condition is
met. Sometimes you only want to render a component when valid
props exist or are in a certain condition; ‘renderNothing’ is
an easy way to completely remove the component when you don’t
need to show it.
const userIsNotActive = ({ status }) => status !== 'active'; const hideIfNotActive = branch(userIsNotActive, renderNothing); const FeaturedUser = hideIfNotActive(({ name, status }) => <div> <h3>Today's Featured User</h3> <User name={ name } status={ status } /> <hr /> </div> );