React Context API (Hooks and Classes)

App.js

import React from 'react'
import HomePage from './HomePage'
import { UserProvider } from './UserContext'

function App() {
    const user = { name: 'Jibon Bikash Roy', email: 'Jibon Bikash Roy ', loggedIn: false }

    return (
        
 <UserProvider value={user}>
    <HomePage />
</UserProvider>  
        
    )
}
export default  App;

UserContext.js

import React from 'react'

const UserContext = React.createContext({})

export const UserProvider = UserContext.Provider
export const UserConsumer = UserContext.Consumer
export default UserContext

HomePage.js

// import React, {Component} from 'react'
// import { UserConsumer } from './UserContext'
// class HomePage extends Component {
//     render() {
//         return (
//             
//             <UserConsumer>
//                 {props => {
//                     return <div>{props.name}</div>
//                 }}
//             </UserConsumer>
//             
//         )
//     }
// }
// export default HomePage;

//
import React, { Component } from 'react'
import UserContext from './UserContext'

class HomePage extends Component {
    static contextType = UserContext

    componentDidMount() {
        const user = this.context

       // console.log(user) // { name: 'Jibon Bikash Roy', loggedIn: true }

      //  console.log(user.name)
      //  let username= user.name;
    }

    render() {
        console.log(this.context)
        let usercon= this.context;
        console.log(usercon.name)
        return (
    <div> Hello { usercon.name} </div>
)
    }
}
 export default HomePage;