finished react 8

react/8/pics/src/api/unsplash.js

@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+// Create an axios client with custom properties
+export default axios.create({
+    baseURL: "https://api.unsplash.com/",
+    headers: {
+        Authorization: 'Client-ID b4d9ccd8113d1f68079b8eb43747bfe5e56705409be3ed9e1db0accbc3da35ce'
+    }
+})

react/8/pics/src/components/App.js

@@ -1,22 +1,24 @@
 import React from 'react'
 import SearchBar from './SearchBar'
-import axios from 'axios'
+import unsplash from '../api/unsplash'
+import ImageList from './ImageList'
 
 class App extends React.Component {
-    async onSearchSubmit(term) {
-        const response = await axios.get("https://api.unsplash.com/search/photos", {
+    state = { images: [] }
+
+    onSearchSubmit = async term => {
+        const response = await unsplash.get('/search/photos', {
             params: { query: term },
-            headers: {
-                Authorization: 'Client-ID b4d9ccd8113d1f68079b8eb43747bfe5e56705409be3ed9e1db0accbc3da35ce'
-            }
         })
-        console.log(response.data.results)
+
+        this.setState({ images: response.data.results })
     }
 
     render() {
         return (
             <div className="ui container" style={{ marginTop: "10px" }}>
                 <SearchBar onSubmit={this.onSearchSubmit} />
+                <ImageList images={this.state.images} />
             </div>
         )
     }

react/8/pics/src/components/ImageList.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const ImageList = (props) => {
+    const images = props.images.map((image) => {
+        return <img key={image.id} src={image.urls.regular} alt={image.description} />
+    })
+
+    return <div>{images}</div>
+}
+
+export default ImageList