i want to select top 8 photos from jsonplaceholder api and then fetch them using reactjs actually i'm using axios and here's my code:

class App extends React.Component {

  ponentDidMount() {
    axios.get(`/`)
      .then(res => {
        const pictures = res.data;
        this.setState({
          pictures,
          loading: false,
          error: null
        });
      })
      .catch(err => {
        this.setState({
          loading: false,
          error: err
        });
      });
  }

  renderLoading() {
    return <div>Loading...</div>;
  }

  renderError() {
    return (
      <div>
        Something went wrong: {this.state.error.message}
      </div>
    );
  }

i want to select top 8 photos from jsonplaceholder api and then fetch them using reactjs actually i'm using axios and here's my code:

class App extends React.Component {

  ponentDidMount() {
    axios.get(`https://jsonplaceholder.typicode./photos/`)
      .then(res => {
        const pictures = res.data;
        this.setState({
          pictures,
          loading: false,
          error: null
        });
      })
      .catch(err => {
        this.setState({
          loading: false,
          error: err
        });
      });
  }

  renderLoading() {
    return <div>Loading...</div>;
  }

  renderError() {
    return (
      <div>
        Something went wrong: {this.state.error.message}
      </div>
    );
  }

• javascript
• json

• 1 OK, awesome. But did you have a question? – Randy Casburn Commented May 18, 2018 at 2:59

2 Answers 2

There is a simple way you can limit data fetching is by => "http://jsonplaceholder.typicode./photos?_start=0&_limit=5" It means, starting at 0 and goes up to 5.

Api does not provide a way to limit number of records to return so you can save only required number of records by using Array.prototype.slice(start, end)

ponentDidMount() {
  axios.get(`https://jsonplaceholder.typicode./photos/`)
  .then(res => {
    const pictures = res.data.slice(0, 8);
    this.setState({
      pictures,
      loading: false,
      error: null
    });
  })
  .catch(err => {
    this.setState({
      loading: false,
      error: err
    });
  });
}