The state shared between our toggle components is implicit because it lives inside context and is not easily accessible. In this lesson, we'll make a Higher Order Component (HOC) factory function which will allow the user to access that implicit state in their own components. Higher Order Components take a component and render a new component with some enhanced behaviors, in this case, the toggle context is added to the returned component. This factory component can get rid of duplicated code caused by needing to declare
contextTypes on each component that needs it. Now we can wrap the component with
withToggle and destructure
toggle from the props.
Compound component gives more rendering control to the user. The functionality of the component stays intact while how it looks and the order of the children can be changed at will. We get this functionality by using the special
React.Children.map function to map over the children given to our
<Toggle/> component. We map over the children to pass the
on state as a prop to its children. We move the visual pieces of the component out into function components and add them as static properties to
React DevTools and React's built-in development warnings rely on the
name property of your react components to give you a good developer experience. Unfortunately, Higher Order Components make it harder for React to give that good experience. In this lesson, we’ll learn about the
displayName property and how that impacts React Developer Tools. Then we'll improve the
displayName for our Higher Order Component by changing where we call the withToggle Higher Order Component.
In this lesson, we'll take a step back and re-examine the problem of sharing Component logic by iterating our way to arrive at a new pattern called render props. A render prop is a function that renders JSX based on state and helper arguments. This pattern is the most flexible way to share component logic while giving complete UI flexibility. It's a remarkably simple and powerful pattern.