How do I fetch data in React.Component class through Context API?

Question

How do I fetch data coming from another component using Context API, and the component which accepts the data should be a React.Component (NOT in a function component).

I want to get data which resides in Context. Provider as a component. I googled on how to use React Context API, and all the answers are based on using functional component, NOT React. Component.

Since I do not know how to fetch data from other components using Context API, so I tried PubSub-JS, but now I want to use Context API.

I have a component using Context API, and I want to get data from below component.

import React, {Component} from "react";
import axios from "axios";

const VideoInformationContext = React.createContext();

class VideoContext extends Component{

    constructor(props){
        super(props);
        this.state = {
            videoIdx: props.videoIdx
            videoList:null,
            theme:null
        }
    }

    componentDidMount(){
        this.loadResource();
    }

    loadResource(){
        axios({
            url:`<TEST SERVER>?videoIdx=${this.state.videoIdx}`,
            method:"get"
        }).then(response => {
            this.setState({
                videoList:response.data.videosAndTheme.videoList,
                theme:response.data.videosAndTheme.theme
            });
        });
    }

    render(){
        return (
            <VideoInformationContext.Provider value={this.state}>
                {this.props.children}
            </VideoInformationContext.Provider>
        );
    }
}

export const VideoinformationConsumer = VideoInformationContext.Consumer;
export default VideoContext;

So my question is that I want to get data in ComponentDidMount() method in React. Component fetching from the above component.

Answer 1

In the consumer component you can set the context using static contextType = MyContext; so your provider component would look something like the following:

import React, {Component} from "react";
import axios from "axios";

export const VideoInformationContext = React.createContext();

class VideoContext extends Component{

    constructor(props){
        super(props);
        this.state = {
            videoIdx: props.videoIdx
            videoList:null,
            theme:null
        }
    }

    componentDidMount(){
        this.loadResource();
    }

    loadResource(){
        axios({
            url:`<TEST SERVER>?videoIdx=${this.state.videoIdx}`,
            method:"get"
        }).then(response => {
            this.setState({
                videoList:response.data.videosAndTheme.videoList,
                theme:response.data.videosAndTheme.theme
            });
        });
    }

    render(){
        return (
            <VideoInformationContext.Provider value={this.state}>
                {this.props.children}
            </VideoInformationContext.Provider>
        );
    }
}

export default VideoContext;

And your consumer component would look something like the following:

import React, { Component } from 'react';
import { VideoInformationContext } from '--the location of your provider component--';

class MyConsumerComponent extends Component {
  static contextType = VideoInformationContext;

  componentDidMount(){
    // you can use it here like this
    const videoList = this.context.videoList;
  }
  render() {
    //or you can use it here like this
    return <p>{this.context.videoIdx}</p>;
  }
}

export default MyConsumerComponent;

So in your provider component export the created context like I did above and then in your consumer component import the context from wherever you set the context and then set the static contextType in your class and then you can access it anywhere in your component and in the render with this.context.