# Getting more than 10 images from an API request to unsplash API

**URL:** <https://forum.kirupa.com/t/getting-more-than-10-images-from-an-api-request-to-unsplash-api/639436>\
**Category:** Uncategorized\
**Created:** [February 24, 2019, 9:02pm UTC](https://forum.kirupa.com/t/getting-more-than-10-images-from-an-api-request-to-unsplash-api/639436 "2019-02-24T21:02:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kayut](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@kayut](https://forum.kirupa.com/u/kayut)\
**Post date:** [February 24, 2019, 9:02pm UTC](https://forum.kirupa.com/t/getting-more-than-10-images-from-an-api-request-to-unsplash-api/639436/1 "2019-02-24T21:02:31Z")

</div>

When I send a **/search/photos** request to **Unsplash** API, I get a response with only 10 images.

Is it possible to get more than 10 images?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [February 25, 2019, 4:35am UTC](https://forum.kirupa.com/t/getting-more-than-10-images-from-an-api-request-to-unsplash-api/639436/2 "2019-02-25T04:35:08Z")

</div>

According to the [documentation](https://unsplash.com/documentation#search), there is a `per_page` value that you can set that increases it beyond the default to **10**.

---

<div class="post-metadata">

**Author:** ![kayut](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@kayut](https://forum.kirupa.com/u/kayut)\
**Post date:** [February 25, 2019, 2:51pm UTC](https://forum.kirupa.com/t/getting-more-than-10-images-from-an-api-request-to-unsplash-api/639436/3 "2019-02-25T14:51:46Z")

</div>

Thanks @kirupa. I added that option and it’s loading 30 images now, which seems to be the max number of images per page. Now, I’m trying to find out how to add pagination to my app.

**app.jsx**

```
import React, { Component } from "react";
import axios from "axios";

import ImageList from "../ImageList";

class App extends Component {
  state = {
    images: []
  };
 
  onSearchSubmit = async inputValue => {
    const API_KEY = "1234";

    const response = await axios.get(
      `https://api.unsplash.com/search/photos?page=5&per_page=30&query=${inputValue}&client_id=${API_KEY}`
    );

    this.setState({ images: response.data.results });
  };

  render() {
    return (
      <>
        <ImageList images={this.state.images} />
      </>
    );
  }
}

export default App;

```

**ImageList.jsx**

```
import React, { Component } from "react";

class Gallery extends Component {
  render() {
    const childElements = this.props.images.map(item => {
      return (
        <li key={item.id}>
          <img
            src={item.urls.regular}
            alt={item.description}
          />
        </li>
      );
    });

    return (
        {childElements}
    );
  }
}

export default Gallery;

```

Any help would be great!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [February 25, 2019, 6:45pm UTC](https://forum.kirupa.com/t/getting-more-than-10-images-from-an-api-request-to-unsplash-api/639436/4 "2019-02-25T18:45:28Z")

</div>

You should look into React Router! It is perfect for this kind of work. I am actually part-way through a tutorial on using React Router with the unsplash API to navigate between pages of images! No ETA on when it will be completed, unfortunately.

---

<div class="post-metadata">

**Author:** ![kayut](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@kayut](https://forum.kirupa.com/u/kayut)\
**Post date:** [February 27, 2019, 1:11pm UTC](https://forum.kirupa.com/t/getting-more-than-10-images-from-an-api-request-to-unsplash-api/639436/5 "2019-02-27T13:11:59Z")

</div>

I can’t wait to go through your tutorial. Please let’s know once it’s ready.  
Meanwhile, I pushed my project to CodeSandBox: [https://codesandbox.io/s/523r34o39n](https://codesandbox.io/s/523r34o39n)  
maybe some one can have a look and help me to fix the issue.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [February 28, 2019, 12:29am UTC](https://forum.kirupa.com/t/getting-more-than-10-images-from-an-api-request-to-unsplash-api/639436/6 "2019-02-28T00:29:58Z")

</div>

The basic React Router tutorials should be able to help you out. I wrote a basic one here: [https://www.kirupa.com/react/creating\_single\_page\_app\_react\_using\_react\_router.htm](https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm)