React - useContext inside class

Question

I'm newbie in react and i want use useContext inside my class, how do i solve this? This is example of my current code right now

import { Context } from '../context/ChatListContext'

const ChatList = ({ onAction }) => {
    const {state, fetchChatList} = useContext(Context)

And i'm expecting the same for my class

import { Context } from '../context/ChatListContext'

class MainScreen extends Component {

//const {state, fetchChatList} = useContext(Context) *how do i declare this?

  constructor(props) {
    super(props)
    this.state = { loading: true, showAction: false }
    setTimeout(() => {
      StatusBar.setBackgroundColor(primary)
    }, 100)
  }
...
}

Can anyone enlighten me?

Answer 1

useContext is a hook that can't be used in a class component. For a class component you define a static contextType

import { Context } from '../context/ChatListContext'

class MainScreen extends Component {

 static contextType = Context

  constructor(props) {
    super(props)
    this.state = { loading: true, showAction: false }
    setTimeout(() => {
      StatusBar.setBackgroundColor(primary)
    }, 100)
  }
...
  render() {
       const {state, fetchChatList} =this.context;
  }
}

Answer 2

The contextType property on a class can be assigned a Context object created by React.createContext().

Take note of how outside the class we can assign the value of MyContext to the Class.contextType

You can then access all of your contexts with this.context

import MyContext from '@/context/MyContext'

class Login extends React.component() {

  constructor(props) {
    super(props);

    this.state = { four: 2*2 }
  }

  render() {

    console.log(this.context);
    
    return (
      <div>

      </div>
    )
  }

}

Login.contextType = MyContext