score:0
i don't know if this is exactly what you want:
solution 1: you can make requests on all pages and save them in a state array. every time you make a request on a page, you can make a spread operator on your array and add the new response. but this solution will take a long time as this api is over 1100 pages long.
solution 2: you can draw 5 integer values (between 1 and the number of pages), and, according to the number that comes out, you make the request on the page drawn. with the response to the request, you make another sort and catch the first pokemon and store it in a state array. repeat this operation 4 more times, or as many times as you like. in the end, just render the array with the pokemons drawn!
at first it was these two solutions that came to my mind! if this is in line with your question, good luck!
score:0
generate offset randomly each time, and fetch 5 pokemons it will fetch you 5 consecutive pokemons. you can also fetch all pokemons once and randomly choose 5 indexes. here is sample code. codesandbox https://codesandbox.io/s/gallant-davinci-jfutn?file=/src/app.js:0-946
import { usestate, useeffect } from "react";
import axios from "axios";
function geturl(limit, offset) {
return `https://pokeapi.co/api/v2/pokemon/?limit=${limit}&offset=${offset}`;
}
export default function app() {
const [items, setitems] = usestate([]);
const [offset, setoffset] = usestate(math.floor(math.random() * 1000));
const generatenewid = () => {
const id = math.floor(math.random() * 1000);
setoffset(id);
};
// fetch pokemon
useeffect(() => {
const fetchitems = async (offset) => {
const response = await axios.get(geturl(5, offset));
const data = response.data;
setitems([...items, ...data.results]);
};
fetchitems(offset);
}, [offset]);
return (
<div classname="app">
<h1>hello codesandbox</h1>
<h2>start editing to see some magic happen!</h2>
{items && items.map((item) => <p key={item.url}>{item.name}</p>)}
<button onclick={generatenewid}>fetch 5 pokemon</button>
</div>
);
}
Source: stackoverflow.com
Related Query
- Pokemon API request generate 5 Pokémon at a time
- Trying to create a pokemon search using API but running into issue where data is not being loaded on time
- How to send current date time to Rest Api with put request in react js?
- How to test API request failures with Redux Saga?
- Problem with protected routes, context API and firebase user authentication request
- Using fetch API with mode: 'no-cors', can’t set request headers
- ECONNREFUSED when making GET request in app, but API returns JSON successfully
- Is it OK to make a REST API request from within a Redux reducer?
- How can I create a progress bar for an API request in React Native?
- Insufficient Permission: Request had insufficient authentication scopes in google directory API when logging through admin
- Storing User-Id in Client Side App for API Request
- API request error - No 'Access-Control-Allow-Origin' header is present on the requested resource
- Request header not set as expected when using 'no-cors' mode with fetch API
- Sending a details request to Google Places API - (CORS error)
- How to generate a unique id automatically for the data that is posted to an API server using axios library in redux
- Mocking fetch API for POST request using sinon, jest for react.js application
- How to send POST request to Django API from ReactJS web app?
- WordPress custom API endpoint POST request fails in React
- Fetch request on API Rails doesn't return json
- how to set api request to google drive api using axios
- ReactJS- Youtube Data API request error 400
- Weather API request cors error
- Axios get request returns undefined for the first time in React
- How to make synchronous API call request in react js
- Nextjs API POST request body not being parsed
- Make get request to third party API with api key using express.router();
- How to do a REST API post request with FileUpload to an Azure AD Protected REST API
- React and Redux: 401 Unauthorized Error POST API Request
- How to make a POST request with json content type with Semantic UI API
- Flux+React.js - Caching API request responses
More Query from same tag
- Redirect logged user from login/register page with React Hooks
- Is there a way in TypeScript to say "Include" (opposite of Exclude)?
- React.createElement type is invalid [DIFFERENT ERROR FROM OTHER SIMILAR POSTS]
- pages.map is not a function in gatsby nodejs using axios to fetch data
- Can we use Calender component in the material UI picker as a standalone component without using the Datepicker - if so How?
- How to add an initial delay to autoplay in React Slick slider?
- how to render <script> tag on GatsbyJs
- How to create a controlled input with empty default in React 15
- How to make a clickable header in react table
- Gatsby syncing the table of contents with the page scroll and style the active link
- I am trying to set other parameters from the values fetched in dropdown. But the values are not displayed. How can I display them
- React.js + bootstrap-table working only on first load, but transitions break the table
- High frequency counter in Reactjs
- How can I include authorization Headers in my react-app?
- How to do React - Redux connection?
- enable button to submit only when all the fields are filled
- how to mock json.parse() in jest tests
- How to convert decimal number from the accessor to react-table?
- issue with reading result from POST in fetch request to Github API
- How to add units of measurement inside input field in reactjs
- Create element / resource with dynamic fields in react admin
- Reactjs: ReferenceError: kendo is not defined
- Modify output of localIdentName / getLocalIdent
- How to get Input field type as props in react typescript
- How to properly use peerDependencies when publishing an NPM module (React component) with webpack? And use with npm link?
- When using container in React-Boostrap my body's background-color is overwritten
- How do I update the state by updating an array within a particular object from an array of objects?
- React class component state value not updating
- React on rails:Iterating through an array of activerecord
- Wrap React-Bootstrap Scrollable Modal in Formik Form