Problem with React component state changing

1

Hello I’m trying to build simple app:
In the searching bar I’m entering key word and by this word app returns some images from unsplash.com site

when I’m using console.log() for testing it return correct data
but then I’m trying to set state of the component i’m getting error
here is my App component code and prtSc of errors
I cant catch what is wrong with it?

import React, { Component } from 'react';
import unsplash from '../api/unsplash';

import SearcBar from './SearchBar';

class App extends Component {
  state = { images: [] };

  onSerchSubmit = async term => {
    const response = await unsplash.get('/search/photos', {
      params: { query: term }
    });
    console.log(response.data.results);
    this.setState({ images: response.data.results });
  };

  render() {
    return (
      <div style={{ marginTop: '10px' }} className="ui container">
        <SearcBar onSubmit={this.onSerchSubmit} />
        Found: {this.state.images}
      </div>
    );
  }
}
export default App;

Untitled
Untitled1366×768 290 KB

2

When this.state.images is being rendered after you setState, it’s attempting to render objects (as shown in the console output) – but you can’t render objects in react

1 Like
3

Thanks
it’s such stupid mistake :crazy_face: