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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![Rick Varela](https://uploads.teamtreehouse.com/production/profile-photos/10828428/micro_imIf.jpg)
Rick Varela
3,750 PointsI´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](https://secure.gravatar.com/avatar/5be4a43d3940ac79f47e2fe26106bf1d?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Dom Ss
4,339 PointsHey 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](https://uploads.teamtreehouse.com/production/profile-photos/11543338/micro_Chick_hat.jpg)
Mark Westerweel
Full Stack JavaScript Techdegree Graduate 22,378 PointsRick 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](https://uploads.teamtreehouse.com/production/profile-photos/969492/micro_tool_chess_set_2.jpg)
Steven Parker
230,688 PointsThere'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.