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

1

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?

2

According to the documentation, there is a per_page value that you can set that increases it beyond the default to 10.

3

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!

4

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.

5

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
maybe some one can have a look and help me to fix the issue.

6

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