Reintroducing React: V16 and Beyond/

...

/

Provider and Consumer Components

Provider and Consumer Components

In this lesson, we'll explore provider and consumer components.

We'll cover the following...

Provider and Consumer Components

Well, every context object comes with a Provider and Consumer component.

The Provider component provides the value saved in the context object to its children, while the Consumer component consumes the values from within any child component.

I know that was a mouthful, so let’s break it apart slowly.

In the Benny example, we can go ahead and destructure the BennyPositionContext to retrieve the Provider and Consumer components.

const BennyPositionContext = createContext({ 
	x: 50, 
	y: 50 
})
// get provider and consumer
const { Provider, Consumer } = BennyPositionContext

Since Provider ...