[Udemy] searching xx -6

Image shows

• 검색한 이미지가 searchbar 밑에 나올 수 있게 Funtional component 만들기
  

<App.js>

import React from 'react';
import unsplash from '../api/unsplash';
import SearchBar from './SearchBar';
import ImageList from './ImageList';

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

  onSearchSubmit = async anything => {
    const response = await unsplash.get('/search/photos', {
      params: { query: anything },
    });

    this.setState({ images: response.data.results });
  };
  render() {
    return (
      <div className="ui container" style={{ marginTop: '10px' }}>
        <SearchBar onSubmit={this.onSearchSubmit} />
        
        // going to show ImageList component inside of App render method as below. 
        <ImageList imageList={this.state.images} />
        
        Found :{this.state.images.length} images
      </div>
    );
  }
}
export default App;

• somehow communicate our list of images that we just fetched down to the image list.
  we're going to do that communication from a parent down to a child component using the same prop system we've used to many times before.
  so i'm going to define a new prop one the image list called "images" and to it i'm going to pass all the images that we have inside of our state object.

<ImageList.js>

import React from 'react';

const ImageList = props => {

//props images is going to show up inside the props object.

  console.log(props.imageList);
  
  return <div>Image List</div>;
};

export default ImageList;

• first renders we'll notice i get the empty array because we don't have any images yet.
  

• if we searched cat, there are 10 images like as below.