From the course: React: Components, Context, and Accessibility

Unlock the full course today

Join today to access over 24,800 courses taught by industry experts.

Referencing context in stateless functional components

Referencing context in stateless functional components - React.js Tutorial

From the course: React: Components, Context, and Accessibility

Start my 1-month free trial Buy for my team

Referencing context in stateless functional components

“

- [Narrator] In the last lesson, we looked at how the provider can pass data to a child component that uses the consumer. In this video, we'll take a look at how to change state using the context API. The first place I want to start is I want to add another state variable. So, we're gonna set up a value called status, which we'll set to OPEN. So this will mean the resort is open, closed, or perhaps on hold. The next step is I want to adjust the trail component a little bit. So, right now, we are rendering our consumer, and then we render this one paragraph tag, let's actually render a little bit more here. So, let's render a div, and this div is going to wrap around this paragraph. Now, we're displaying the context here, let's also display the status, so we'll say the resort is context.state.status, and then finally, we want to add a button. So, here's where things get interesting. The button is going to be…

Contents