Context API example 1

App.js

import React from "react";
import CompoC from "./CompC";
import { UserProvider } from "./userContext";

export default function App() {
  return (
    <div>
      <UserProvider value="ram">
        <CompoC />
        <CompD />
      </UserProvider>
    </div>
  );
}

CompC.js

//class component

import React from "react";
import { UserContext } from "./userContext";

export default class CompC extends React.Component {
  render() {
    return <div>{this.context}</div>;
  }
}

CompC.contextType = UserContext;

CompD.js

// function component

import React from "react";
import { UserConsumer } from "./userContext";

export default function CompD() {
  return <div>
    <UserConsumer>
      {
        username => {
          return <h3>{username}</h3>
        }
      }
    </UserConsumer>
  </div>

userContext.js

import React from "react";

const UserContext = React.createContext("ramcharan");

const UserProvider = UserContext.Provider;

const UserConsumer = UserContext.Consumer;

export { UserConsumer, UserProvider };

export { UserContext };