Test driving useContext
Context is fun to use and has quite a few common applications. Consider a site with a user logo displayed at the top-right corner of the screen:
Figure 7.6 – An application with App, Header, and Logo
The site is created with an App component, containing Header and Main. And in turn, Header contains Logo, and Site contains Greeting. App, Header, and Logo are defined as follows:
function App({ initialUser }) {
const user = initialUser
return (
<div>
<Header user={user} />
<Main user={user} />
</div>
)
}
const Header = ({ user }) => {
return <Logo user={user} />
}
const Logo = ({ user }) => {
return (
<div>
<img url={ user.imageUrl } />
...