Can i update Context API state in javascript class?-CodePudding

I have a Bluetooth class and listener method. I want to update my state in Bluetooth class and i will show in functional component.

JavaScript Class

import React, { Component } from "react";
import { MySampleContext } from "../../contexts/MySampleContext";

export class BluetoothClass extends Component {
    
    static contextType = MySampleContext;

    sampleBluetoothListener(value){
        this.context.updateMyState(value);
    }

}

This is my error.

TypeError: undefined is not an object (evaluating 'this.context.updateMyState')

CodePudding user response：

Yes you can, you can pass data down to your component tree using Context API.

// Context file 
import React from 'react';
const FormContext = React.createContext();
export default FormContext;

// Parent Class Component 
import FormContext from "../context";
class ParentClass extends Component {
  state = { name: "John Doe" };
  render() {
    return (
      <FormContext.Provider value={this.state.name}>
        <ChildClass />
      </FormContext.Provider>
    );
  }
}

// Child Class Component
import FormContext from "../context";
class ChildClass extends Component {
  render() {
    return (
      <FormContext.Consumer>
        {(context) => {
          console.log(context);
        }}
      </FormContext.Consumer>
    );
  }
}

The value prop in the context API takes an object, in which you could add a method that changes your state and pass it down to your component tree.

I advice you to take a quick look at the official Context API docs by React for a better understanding.

CodePudding user response：

Thanks for all answers. But i mean pure "javascript class" not component, without rendering and react hooks is component based. Finally i solve problem with call back functions.