React this.setState not working with context API

Question

Currently I have this code from my AppContext.js file

import React, { Component, createContext } from 'react';

export const AppContext = createContext();

export class AppProvider extends Component {

state = {
    test: '',
};

getEntries() {
    console.log('FIRED');

    this.setState({test: 'HELLO'});
}

render() {
    return (
      <AppContext.Provider
          value={{
              ...this.state,
              getEntries: this.getEntries
          }}
      >
          {this.props.children}
      </AppContext.Provider>
    );
}

}

I'm calling the getEntries function and its displaying message from the console successfully but the this.setState is not working it says TypeError: this.setState is not a function

Possible duplicate of [Unable to access React instance (this) inside event handler](https://stackoverflow.com/questions/29577977/unable-to-access-react-instance-this-inside-event-handler) — Andrew Li, Jan 23 '19 at 12:34
`getEntries` doesn't know about `this` yet, you have to bind it in the constructor. — Ionut Necula, Jan 23 '19 at 12:34

score 0 · Accepted Answer · answered Jan 23 '19 at 12:36

0

The problem here is this is not bound to the right context.

The simplest workaround is probably to use this syntax:

getEntries = () => {
    ...
}

There are several ways in React to bind this to the class context: check this article for other ways.

answered Jan 23 '19 at 12:36

Simone

20,302
14
79
103

I have used your suggestion arrow function in class property . Thanks – Nico Sevilla Jan 23 '19 at 12:49

score 0 · Answer 2 · answered Jan 23 '19 at 12:45

getEntries function needs to be bind to the component. The simple way to do it is to use arrow function as shown below.

getEntries = () => {
    console.log('FIRED');

    this.setState({test: 'HELLO'});
}

The second way to bind getEnteries method to the component is

constructor(props) {
    super(props);
    // This binding is necessary to make `this` work in the callback
    this.getEntries = this.getEntries.bind(this);
  }

React this.setState not working with context API

2 Answers2