Higher-Order Components

According to the React documentation (https://reactjs.org/), "... a higher-order component is a function that takes a component and returns a new component". A HOC is not a React API, it is a pattern that shares common functionalities. From the name itself, you may think it is some sort of component; however, it is actually a function. A HOC function accepts a component as an argument and returns a new component. HOCs help us reuse code with the same functionalities between components so that we do not have to repeat the same code.

To see HOCs in action, we are going to add a new feature to our Endangered Animals app that we created previously. We are going to add another property in the details data called Donation and if the amount of a donation is bigger than 50, we will update the color of the donation to green. Otherwise, we will keep the donation color red.

Before we start the exercise, let's update the details object we used in the...