score:0
this answer is inspired by this article
const [words, setwords] = react.usestate();
const callapitentimes = async () => {
// create an array of promises
let promises = [];
for (let i = 0; i < 10; i++) {
promises.push(fetch("https://palabras-aleatorias-public-api.herokuapp.com/random"));
}
// wait for all promises to fulfill
promise.all(promises)
.then((responses) =>
// get a json object from each of the responses
promise.all(responses.map((res) => res.json()))
)
.then((data) => {
// get all the data and store it in our usestate
const results = data.map(({ body }) => body.word);
setwords(results);
})
.catch((err) => console.warn(err));
};
// on first render when words === undefined, call api once to fetch first 10 words
useeffect(() => {
if (!words) {
callapitentimes();
}
}, [words]);
return (
<>
{/* render each word in the word array */}
{words.map((word) => (
<p>{word}</p>
))}
{/* get new words after a button click */}
<button onclick={() => callapitentimes()}>get new words</button>
</>
)
Source: stackoverflow.com
Related Query
- Trying to fetch random words from API and displaying them
- Best way to handle images and links from a rest api and displaying them in React
- Trying to fetch a Postman API and displaying the contents of the array using map function. It says the array is undefined
- Trying to fetch data from and external API but code breaks
- trying to fetch data from api and show it in react native flatlist and my code displays data in console log,but it didnt render in emulator
- React.js: loading JSON data with Fetch API and props from object array
- CORS errors when trying to fetch from new Google Cloud API Gateway
- How to fetch data from api and pass it as props
- displaying data from fetch api using react
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- How to fetch and display data from Express API to a React app?
- Displaying JSON data using Fetch API and map() in Javascript/Reactjs
- How to use useEffect() to fetch data from an api in a useReducer() and useContext() state management setup?
- Getting undefined when trying to fetch data from an api - React
- Trying to display a random joke, but the question and answers don't match from my local json file
- I am trying to map images from an array and passing them as props. I am importing them in my component but i am getting broken image.Below is my code
- How can I fetch base64 encoded images (string) from a URL/ API and display in ImageField or on react-admin list or show page
- ReactJS Fetch User Data from API and add to table
- Render Cards after fetch data from api and create an object
- Fetch random data from API without refreshing the page in react axios
- Getting object data from API and then displaying it (React Fetch)
- i was trying to map data from api to some jsx element and i keep getting type error
- Fetch data from api and rearrange it in react
- How to fetch data from API and then pass it to another component in react after it is fully loaded?
- Use multiple React useState() hooks to fetch Category title and posts from json api
- Posting data by combining the data from a form and a fetch api response
- How to fetch data from Nextjs API route when build and deploy?
- Fetch data from API and redirect not working - NEXTJS
- How to grab ASP.NET Web Api token (login) from a JS fetch and save token
- Fetch and array of objects from a database and displaying it with react
More Query from same tag
- How to register cypress `code-coverage` plugin with cypress v10?
- Is there any way to export a variable from an React component?
- React JSX and FirstSibling or FirstChild
- How do I set a marker in MapView of React Native
- TypeScript Redux Action Create Function return type
- How to use Turborepo for an existing react app created with Create React App in order to make it a monorepo?
- ReactJS+Redux: How to handle a prop that depends on another props
- Access array of objects to display in React Native Text component
- Re-setting the whole state in setState()
- Problem serving index.html from Express server, but not when I run client separately
- How to push changes in package.json of kentico-cloud-delivery of node_modules into bitbucket
- How can I achieve the following grid output in React/JSX?
- how can we use redux state in useState to set initial values
- Javascript immutable pop()?
- Socket.io nodejs https CERT_AUTHORITY_INVALID
- How do I convert from utc to another timezone using moment?
- How to insert one component to another component onclick in reactjs?
- react - flex item outside the flex container
- Should a React component prop be required when the data is fetched from the backend API?
- How to write test with swr
- Where should I declare 2 varable in map method in react
- onclick on img that would link to a particular section on another page
- Selected state is not retaining new selected option
- aws-amplify client side password validation
- How can I know my current route in react-navigation 5?
- I want to add a validation to restrict input value, the value has to be less than 5 if it greator that 5 it should show error
- Enzyme simulate.('change', event) not working
- Babel plugin-proposal-decorators not working as expected
- Understanding the use of && in a react component
- React-router not rendering dynamic component- When clicked nothing happens