In a render props pattern, what does a child component typically do with a function prop named render?

In a render props pattern, what does a child component typically do with a function prop named render?

• A. It passes the function down to a child component without calling it.
• B. It uses the function to fetch more data.
• C. It calls the render function to produce UI.
• D. It defines a CSS style object with the function.

Answer: (C)

Render props let a component share UI logic by passing a function prop (commonly named render) that returns elements. The child component then calls that function to produce the actual UI, typically supplying data or state as arguments. This is why the best choice is that the child invokes the render function to render the UI, using whatever data it has available. For example, a component might call this.props.render({ loading, items }) and the function you pass in returns the appropriate UI (a loading indicator or a list) based on those values. That’s what makes render props powerful: the UI is generated by calling the function, not just by passing it along or using it to fetch data or define styles.

Render props let a component share UI logic by passing a function prop (commonly named render) that returns elements. The child component then calls that function to produce the actual UI, typically supplying data or state as arguments. This is why the best choice is that the child invokes the render function to render the UI, using whatever data it has available.

For example, a component might call this.props.render({ loading, items }) and the function you pass in returns the appropriate UI (a loading indicator or a list) based on those values. That’s what makes render props powerful: the UI is generated by calling the function, not just by passing it along or using it to fetch data or define styles.