Render Props

In the previous section, we learned what a HOC is and how to use it. In this section, we are going to learn about one more advanced React concept, render props.

Like HOCs, render props help us reuse the code between components and help us avoid repeating the same code. On the other hand, unlike HOCs, which take a component and return an updated component, render props take a function and return a React element. In the next exercise, we are going to do exactly the same as what we did for HOCs, that is, we'll update the color of the donation amount if the amount is bigger than 50.

The details object we mentioned previously will be the same and we are going to update it from the Animal component.

Exercise 7.07: Adding donationColor

In this exercise, similar to what we did for the HOC function exercise, we are going to create a render prop function and check if the amount of the donation is greater than 50. If it's greater than 50, we will change the...