two context needs their info in react code example

Example 1: reactjs context

import React from 'react';
import PageContextProvider from './PageContextProvider';
import Header from './Header';
function App() {
    return (
        <div className="App">
                <Header />
export default App;

import React, { useState, useEffect, createContext } from 'react';
export const PageContext = createContext();
const PageContextProvider = (props) => {
    const [user, setUser] = useState({
        'name': 'harry potter'
    return (
        <PageContext.Provider value={{ 
            user: user,
export default PageContextProvider;

import React, { useContext } from 'react';
import { PageContext } from './PageContextProvider';
const Header = () => {
    const { user } = useContext(PageContext);
    return (
        <div className="header">
export default Header;

Example 2: react context api

Context provide a way to pass data through the component tree without 
having to pass down manually at every level

HOW TO USE::::::
	const MyContext = React.createContext()
Creating a new Context for each unique piece of data that needs to be available
throughout your component data
	const LocaleContext = React.createContext()
Properties of LocaleContext --------

What is a Provider 
	Allows us to "declare the data that we want available throughout our
	component tree"

What is a Consumer
	Allows "any component in the tree that needs that data to be able to 
    subscibe to it"

How to use Provider	
	<MyContext.Provider value={data}>
      <App />