[wakeless]

This is actually a really weird example of using the Context API. I have no idea why you would want to use it to manage a single switch of state.

The far better examples are providing a "theme" across multiple disparate components, and each of them being able to access the colours, or styles. (You could also just use CSS)

The other good example is being able to set the logged in user into a context and then being able to consume the context if you need access to the logged in user.

[AWebOfBrown]

I think it makes more sense if you start thinking outside the Toggle component itself.

For passing down the state to the actual button(s), as Kent says, you could just use React.Children.map(). When you think about consuming that state from other components that need to know the toggle state, things get a bit messier, as many of those components might not be direct children of the actual <Toggle />. Maybe the toggling affects something in your navbar, for example.

In that case, the alternative to using context would be a global store, where the state provider sits above all components (think Redux, MobX).

If you're only consuming the toggle state from child / grandchild / sibling etc. components, the alternative typically involves passing down the toggle state from some parent / grandparent component, which means passing this.state.toggled down 2+ levels, instead of simply importing the context's consumer and subscribing where needed.

Context is now a reasonably simple and clean alternative to those options, but this example leaves envisioning the pain alleviated as an exercise for the reader.

[wakeless]

Fair enough, I suppose. I still think the additional complexity of having to bring in the context for the save of passing 1 variable through the whole tree is overkill though.