In the previous video, I challenged you to modify the player list component to use

a consumer that has access to the context set by the provider and

returns to the list of players.

Now I'll show you my solution.

I'll start by importing consumer at the top of PlayerList.js

with import { Consumer } from './Context'.

Next, I'll add the consumer component inside the return statement.

Remember, consumer requires a render prop or

a function as a child that returns the part of the UI you want to render.

So I'll open a JSX expression with a set of curly braces,

then write a function that takes the parameter context.

This time, I'll use an implicit return, which means that

I'll omit the return keyword and wrap the JSX within parenthesis.

Now I'll move the entire fragment containing the map function inside

the parentheses, and access the player's data directly from context

by replacing props.players with context.

The app displays the list of players in the same way,

except that it's no longer coming in through props.

So now, I can remove the players property and the propTypes.object,

and delete the players prop passed to the player list component in app.js.

And that should do it.

If you're wondering about the object spread attribute passed to the player

component, I'm using it to pass the name, score and ID properties we're getting from

each player object via map all at once as props.

That way you don't have to explicitly list each prop name and value.

Using the spread operator, you're still able to access each prop by its name

in the player component with this.props.name, this.props.id, and

this.props.score, for example.

Most of the app is now accessing the player's data from context.

However, there's still a bit of prop drilling going on

to distribute the event handlers written in the app component.

So in the next video, we'll pass each function to the provider, so

that we're able to access and invoke them from inside a consumer.