this.props.children). The Render Props pattern on the other hand introduces the function as a prop with the name of
render(or any other name).
nullcan also be passed as props.
childrenare a special form of props, meaning that both of these lines will result in the same output when rendered:
props.childrencan be used to access I am a child element in
render()within a component. This way, data can be passed from one component into the next. The principle is similar to that of Higher Order Components, but offers a little more flexibility. We do not need to connect our component with a Higher Order Component but can simply be included within JSX in our current component. Thinking back to our
withFormattingHOC from the previous chapter, a similar approach could look like the following using a Function as a Child (FaaC):
boldfunction and the
props.childrencan then be called in a formatter function after checking whether the
childrenprops are actually a function. The function takes in an object with two properties:
boldfunction as its value and
italicfunction as its value. The invoked function is returned by the component.
loadDatamethod can access
this.propsto read the
limitprop. This can then be used as a parameter in the API call
render()method does not return any component that was passed in anymore and calls the
childrenfunction instead which it receives from its own props
childrenfunction receives the
isLoadingstate and returns the items.
limitprop in this case:
PriceTablecomponent which expects three props with the
CryptoPricescomponent (that returns the values needed in the
renderas a name for a prop which expects functions as their values. In our
CryptoPricescomponent, we would then use
CryptoPricescomponent, we can write:
renderand could theoretically choose any valid name. Any passed function will eventually turn the component into a "Render Prop".