this.setState is not a function [duplicate]

by

You are losing the React class this context. Bind it, and also bind it in the async callback function too.

constructor(props){
    super(props);
    console.log("search box imported");
    this.state = {
        results:[]
    };
    this.searchGif = this.searchGif.bind(this);
}

searchGif(event) {
    // ... code here
    xhr.onreadystatechange = () => {
    // ... code here
        this.setState();
    }
}

awesome thing about arrow functions is they bind your context for you and the syntax is awesome too. downside is browser support. Make sure you have a polyfil or a compile process to compile it into ES5 syntax for cross browser performance.

If you cant do either of those then just make a shadow variable of your this context outside of the async onreadystatechange function and use it instead of this.

Edit

Most compilers these days handle binding methods to the class with arrows (without specifying babel transforms … etc), you can assign state as well this way without a constructor

export default class SearchBox extends Component {
  state = { 
    results: []
  }
  
  searchGif = (event) => {
    // ... code here
    xhr.onreadystatechange = () => {
    // ... code here
        this.setState();
    }
  }
  render() {
    // ...
  }
}

More Related Contents:

  1. setState doesn’t update the state immediately
  2. How to update nested state properties in React
  3. What do multiple arrow functions mean in JavaScript?
  4. Arrow function without curly braces
  5. How to scroll to an element?
  6. Why shouldn’t JSX props use arrow functions or bind?
  7. React Native: require() with Dynamic String?
  8. Concatenating variables and strings in React
  9. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  10. What is the difference between using constructor vs state = {} to declare state in react component?
  11. Can I use arrow function in constructor of a react component?
  12. Active link with React-Router?
  13. ES6 array map doesn’t return anything: ReactJS
  14. setState() inside of componentDidUpdate()
  15. Arrow functions and the use of parentheses () or {} or ({})
  16. Why React Hook useState uses const and not let
  17. where is create-react-app webpack config and files?
  18. What does calling super() in a React constructor do?
  19. Importing multiple files in react
  20. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  21. React.createClass vs. ES6 arrow function
  22. How do you import a javascript package from a cdn/script tag in React?
  23. React.js ES6 avoid binding ‘this’ to every method
  24. What do curly braces mean in JSX (React)?
  25. map function not working in React
  26. React functional component default props vs default parameters
  27. React cannot read property map of undefined
  28. Exporting functions with reactjs and babel
  29. Deep nested array of objects not rendering
  30. import * as React from ‘react’; vs import React from ‘react’;

Leave a Comment