Because it is cumbersome to pass props down every single level manually, we can use CONTEXT...

For data considered global (theme, auth), we can use context.

To create a context object:

const ThemeContext = React.createContext('default theme');

Now we can wrap a tree with a CONTEXT PROVIDER...

<ThemeContext.Provider> <Toolbar /> </ThemeContext.Provider>

We can also pass a attribute of value to change the default theme to a theme of our choosing:

<ThemeContext.Provider value="dark">

Now all of children/ancestors of the Toolbar component can use {this.context} to reference 'dark'