Using prop drilling

In this first state management approach, we will store the user, permissions, and loading state in the App component. The App component will then pass this state to the Header and Main components using props.

So, this approach uses React features that we are already aware of. The approach is referred to as prop drilling because the state is passed down the component tree using props.

Carry out the following steps to rework the App component to store the user, permissions, and loading state, and pass this state down to the Header and Main components:

1. Open App.tsx and start by removing all the existing code and adding the following import statements:

   import { useReducer } from 'react';

   import { Header } from './Header';

   import { Main } from './Main';

   import { authenticate, User } from './api/authenticate';

   import { authorize } from './api/authorize';

We have imported useReducer from React to store the...