SEIR 1003

React Context Lab

Create an app that displays and updates data via a Context provider and consumers.

Prerequisites

• React
• Components and State
• React Context

Instructions

1. Create a new app with npx create-react-app react-context-lab.
2. Switch into the new project directory with cd react-context-lab.
3. Open the project in VS Code with code ..
4. Complete the requirements listed below.

Requirements

1. Create a file in your src directory called UserContext.js and use export const UserContext = React.createContext(null); to create a provider and consumer for your app.
2. Your App component should render a Header component and a Home component. Create some state there for your user object. Give it an initial state of: { username: '', lastLogIn: '' }
3. Add a UserContext.Provider component to App that will wrap all of the components that App renders.
4. The Header component should render a Login component.
5. The Login component should contain a form element that has one text input for the username and a submit button. When the form is submitted, it should use the Context consumer to update the user in context with an object that contains the username property and the current date and time such as: { username: 'username-here', lastLogIn: 'current-date-time' }.
6. The Login component should also have a separate 'logout' button, that when clicked sets the user object to: { username: '', lastLogIn: '' }
7. On the Home component, display either a message that reads: Welcome Back username. You logged in at lastLogIn. or a message that reads: Welcome, please login.

Bonus

1. Use moment to format the date and time.
2. Show the login form only when there is no user and the logout button only when the user is logged in.