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

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

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


import React from "react";

export const baseURL = ``;
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;


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:"$key"&limitToFirst=30