Getting Started with React Router v6/

...

/

Use the Context Data in Components

Use the Context Data in Components

Add the required data in the components using Context API.

We'll cover the following...

In this lesson, we’ll learn to use the Context data in all the components.

Getting data from Context Provider

We’ve created a required state as well as functions like user, error, isAuthenticated(), and signOut() in the AuthContext.js file. Let’s run the code widget given in the exercise section and paste the following code into the appropriate component files:

import React, { useContext } from "react";
import { AuthContext } from "./../context/AuthContext";
const Dashboard = () => {
  const { isAuthenticated, user } = useContext(AuthContext);
  return (
    <div>
      <h1 className="title">Dashboard</h1>
      <div>
        <h2 className="sub-title">
          Welcome! &nbsp;
          {isAuthenticated ? user.first_name : null}
        </h2>
      </div>
    </div>
  );
};
export default Dashboard;

All the above files ...