The Context API

Throughout this chapter, we have learned how to pass data through props to communicate between components. However, as we had mentioned briefly earlier, we will face the prop-drilling issue while passing data through props.

From the Endangered Animals app we built earlier to pass data from the <App> component to the <AnimalDetails> component, we had to pass the data through the intermediate component, which is the <Animal> component, even if the <Animal> component does not make use of the prop.

In our app, there is only one intermediate component for now. However, if our app gets more complex, we will have to pass the data through several intermediate components.

So how can we pass the data to the child component directly without going through multiple intermediate components in-between? We could use Redux, which manages the state in one place, called a store, and each component can access its store when needed. However, since this is...