Fetching from API in React Part 3

Last week we ended up counting the images returning from the API after we utilize Axios to fetch the information from Unsplash. Let’s continue working on this little app and create the components that are going to handle rendering the images from the Unsplash API.

I created an image list component to render the list of images:

import React from 'react'
import './imageList.css'
const imageList = (props) => {
const images = props.images.map((image) => {
return <img key={image.id} image={image}/>
});
return <div className="image-list">{images}</div>
};
export default imageList;

Here I’m passing the props to the imageList component and mapping through the array of images and returning it. this way I can call the imageList component directly on the render method for the App component.

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 (term) => {
const resp = await unsplash.get('/search/photos', {
params: { query: term },
});
this.setState({images: resp.data.results})
};
render(){
return (
<div className="ui container" style={{marginTop: "10px"}}>
<SearchBar onSubmit={this.onSearchSubmit}/>
<ImageList images={this.state.images}/> ---> like so.
</div>
);
}
}
export default App;

By typing whatever I want to search for I get some images rendered on the page.

Finally, we did it. We are getting information from an API using react. Thanks for reading and happy coding.