Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Building a Search Feature

Rick Varela
Rick Varela
3,750 Points

Iยดm getting this error Error fetching and parsing data TypeError: _this2.setState is not a function, when using Fetch

performSearch(query) { console.log(https://api.giphy.com/v1/gifs/search?q=${query}&limit=24&api_key=dc6zaTOxFJmzC); fetch(https://api.giphy.com/v1/gifs/search?q=${query}&limit=24&api_key=dc6zaTOxFJmzC) .then(response => response.json()) .then(responseData => { this.setState({ gifs: responseData.data }) }) .catch(error => { console.log('Error fetching and parsing data', error); }); }

3 Answers

Dom Ss
Dom Ss
4,339 Points

Hey Rick,

A long-shot but I made a similar mistake. When you declare performSearch function in the App.js, make sure it has the proper syntax of an arrow function. Maybe it helps some1. ;)

Mark Westerweel
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Mark Westerweel
Full Stack JavaScript Techdegree Graduate 22,378 Points

Rick is correct. I had the same issue.

found the solution on stack

performSearch needs to be written like:

performSearch = (query ) => {
    axios.get(`http://api.giphy.com/v1/gifs/search?q=${query}&api_key=QGx0HYKQgMVMrdvG8nly3aQfAAVUi7q7&limit=24`)
  .then(response => {
    this.setState( { 
      gifs: response.data.data});  
  })
  .catch((error) => {
    console.log('Error fetching and passing data', error)
    });
  }

If the function is not defined as a arrow function, you would need to .bind() "this" like

this._handleDelete = this._handleDelete.bind(this);

To avoid it all together, just use the proper arrow function syntax.

I guess you get _this2 becaue it's the second time ''this" pops up in your code. It was the 3rd time in mine and got the _this3

Steven Parker
Steven Parker
231,184 Points

There's no "_this2" defined or referenced in this code, but without Markdown formatting, we may not be seeing it correctly.

A link to a workspace snapshot would make replication of the issue far easier.