React: How to limit data from API that is shown?

React: How to limit data from API that is shown?
0

I am making an app that displays top stories from the Hacker News API. Right now with my current code it displays the stories but it shows about 500 titles. For now I want to be able to limit it to 50. I was thinking that I would pass in a parameter in the getStoryTitle and have it be set to 50. If it is less than 50 than return the titles, otherwise… do something else? I know what I want to be able to do, but not exactly sure how to implement it

API.js

import React from "react";


export const baseURL = `https://hacker-news.firebaseio.com/v0/`;
export const newStoriesURL = `${baseURL}newstories.json`;
export const storyURL = `${baseURL}item/`;
export const json = ".json?print=pretty";

export const getStoryIds = async () => {
  const response = await fetch(newStoriesURL);
  const data =  response.json();
  return data;
};
export const getStoryTitle = async (storyID) => {
    let arr = [];
    const result = await fetch(`${storyURL + storyID}.json`);
    const data = result.json();
    return data;
};

Story.js

import React, {useState, useEffect} from 'react';
import { getStoryTitle} from "../API.js";
export default function Story ({storyID}) {

const [story, setStory] = useState({});
 useEffect(()=> {
    
    getStoryTitle(storyID).then(data => data && data.url && setStory(data));
 },[]);

Well, since the hacker-news data is exposed through the firebase API, you can take a look at its document. So in this case we can use the limitToFirst and orderBy options together to limit the number of results
For example:

https://hacker-news.firebaseio.com/v0/newstories.json?print=pretty&orderBy="$key"&limitToFirst=30