unable to display fetched API data in react

Question

I'm a complete beginner in react and I am fetching data from https://www.boredapi.com/documentation#endpoints-price . With http://www.boredapi.com/api/activity/ you get a random activity object in the format of

{
    "activity": "Learn Express.js",
    "accessibility": 0.25,
    "type": "education",
    "participants": 1,
    "price": 0.1,
    "link": "https://expressjs.com/",
    "key": "3943506"
}

I'm trying to fetch 10 of these objects using react hooks and then display them . However with my code below when I try to fetch and display a single activity name nothing happens . I initialize an array with hooks and I want to append a new object each time I fetch

useFetch.js to fetch an activity

import {useState , useEffect} from 'react';


export default function useFetch(){
  const [activities,setActivities] = useState([]);
  const getActivities = async () =>{
    for(let k=0;k<10;k++){
      let response = await fetch("http://www.boredapi.com/api/activity/");
      let result = await response.json();
      setActivities((oldstate)=>[...oldstate,result])
     }
  }
  useEffect(()=>{
    getActivities();
  }, [])

  return {activities};
}

AcitivityBar.js to display activities

    import React from 'react';
import useFetch from './useFetch';


export default function ActivityBar(){
  const {activities} = useFetch();
  console.log(activities)
  return (
    <div className="activities-container">
        {
          (activities.map((a , index)=>{
            return <h1 key = {index}>hi</h1>
          }))
        }
    </div>
  );
}

ecoplaneteer · Accepted Answer · 2020-10-16 15:26:43Z

1

You could use Promise.all to wait for multiple requests in parallel:

This will show results simultaneously not one after one.

import { useState, useEffect } from 'react'

export default function useFetch() {
  const [activities, setActivities] = useState([])

  const getActivities = async () => {
    let arr = []
    for (let k = 0; k < 10; k++) {
      arr[k] =  new Promise(async (resolve, reject) => {
        fetch('http://www.boredapi.com/api/activity/').then((response) => {
          resolve(response.json())
        })
      })
    }
    Promise.all(arr).then((results) => {
      setActivities(results)
    })
  }
  useEffect(() => {
    getActivities()
  }, [])

  return { activities, getActivities }
}

answered Oct 16, 2020 at 15:26

ecoplaneteer

1,9841 gold badge12 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vasilis 123 Over a year ago

so promises show results simultaneously and async await one after the other ?

ecoplaneteer Over a year ago

It fetches one after one. In other words, the next fetching will be triggered after prev fetching completed.

Kevin · Accepted Answer · 2020-10-16 14:58:52Z

1

You should probably change your iteration to something like this:

const getActivities = async () =>{
    for(let k=0;k<10;k++){
      let response = await fetch("http://www.boredapi.com/api/activity/");
      let result = await response.json();
      setActivities(prev => [...prev, result])
     }
  }

the useState also has a function input that returns the actual value. You shouldn't rely on the activities since that is always an empty array when all the items get loaded at once

answered Oct 16, 2020 at 14:58

Kevin

2671 gold badge5 silver badges16 bronze badges

Comments

Aadil Mehraj · Accepted Answer · 2020-10-16 15:09:30Z

1

Make sure you append new activities properly from the response using spread operator, like this:

let response = await fetch("http://www.boredapi.com/api/activity/");
let activity = await response.json();
setActivities(prev => [...prev, activity]);

EDIT: The main issue is with the scoping, the activities is not persisted across render. You should consider using prev value.

edited Oct 16, 2020 at 15:09

answered Oct 16, 2020 at 14:45

Aadil Mehraj

2,6141 gold badge9 silver badges17 bronze badges

10 Comments

vasilis 123 Over a year ago

I changed that later . But what about the iteration ?

Aadil Mehraj Over a year ago

which iterations?

vasilis 123 Over a year ago

To display the names

Aadil Mehraj Over a year ago

Are you getting the activities, can you log that?

vasilis 123 Over a year ago

I try to but I get undefined

|

Collectives™ on Stack Overflow

unable to display fetched API data in react

3 Answers 3

2 Comments

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related