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 } />
 ...