Part1- Context Api in React Class Based Component

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ) 

import React, { Component } from 'react' import User from './User' export const myContext = React.createContext(); export default class App extends Component { state = { name: 'Rahul', value: 10 } handleClickContext = () => { this.setState({ value: this.state.value + 1 }) } render() { const contextValue = { data: this.state, handleClick: this.handleClickContext } return ( // <myContext.Provider value={this.state.name}> <myContext.Provider value={contextValue}> <User /> </myContext.Provider> ) } } 

import React, { Component } from 'react' import Guest from './Guest' export default class User extends Component { render() { return ( <div> <h3>User component</h3> <Guest /> </div> ) } } 

import React, { Component } from 'react' import { myContext } from './App' export default class Guest extends Component { render() { return ( <div> <h3>Guest Component</h3> <myContext.Consumer> {({ data, handleClick }) => <> <h4>{data.name}</h4> <h4>{data.value}</h4> <button onClick={handleClick}>Change Value</button> </> } </myContext.Consumer> </div> ) } }