Problem with fetching and loop between data

Question

I want to loop between the data from this api,but i can't show them in return(doesn't show something)

const Api_Endpoint = 'https://api.punkapi.com/v2/beers'
       const [beers, setBeers] = useState([])
        const [description, setDescription] = useState([])
        const [img, setImg] = useState([])
    
        useEffect(() => {
            fetch(Api_Endpoint)
                .then(results => results.json())
                .then(data => {
                    setBeers(data[0].name)
                    setDescription(data[0].description)
                    setImg(data[0].image_url)
                })
    
    
        }, [])

i did it with one useState before,but how can i do that for multiple useState?

I write it like this:

return (
      <div>
     {value => {
                  return value.beers.map(product => {
                    return <Beer key={product.id} product={product.name} />;
                  });
                }}
      </div>
    );

Yes,i've tried to loop with several ways,but it didnt work,i can show one image,one name,...but i want to loop and maping between all data — Negin msr
– Negin msr, Commented Jul 26, 2021 at 11:22

Mamunur Rashid · Accepted Answer · 2021-07-26 11:34:05Z

2

You can try this, Here is Codesandbox.io link

import React, {useState, useEffect} from 'react';

const Api_Endpoint = 'https://api.punkapi.com/v2/beers';

const App = () => {
  const [beers, setBeers] = useState(null);
  const [description, setDescription] = useState(null);
  const [img, setImg] = useState(null);
  
  useEffect(()=> {
    fetch(Api_Endpoint)
      .then((results) => results.json())
      .then((data) => {
        setBeers(data[0].name)
        setDescription(data[0].description)
        setImg(data[0].image_url);
      })
  }, []);
  
  if ((beers || description  || img) === null) {
    return <p>Loading...</p>
  }
  return (
    <div>
      <h1>{beers}</h1>
      <p>{description}</p>
      <img src={img} alt={description}/>
    </div>
  );
};

export default App;

answered Jul 26, 2021 at 11:34

Mamunur Rashid

1,17719 silver badges38 bronze badges

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

3 Comments

Negin msr Over a year ago

thanks but this code just show one item and wont return all of them

Mamunur Rashid Over a year ago

You can try this one: codesandbox.io/s/heuristic-hofstadter-7ls7y

TalOrlanczyk Over a year ago

you can remove the null and just do the !beers as a shorter version

TalOrlanczyk · Accepted Answer · 2021-07-26 11:24:53Z

0

maybe do something like this

setBeers(data.map(d => d.name)
setDescription(data.map(d => d.description)
setImg(data.map(d => d.image_url)

another thing I suggest to you is that try to do it in one state to split them will make everything more difficult to update and when you map on the state you need to do it to each state instead of one and you can't tell if the image_url is belongs to the right place in case you do something and then you just need to do something like this

setBeers([...data])

destructuring is here to make sure the state will update

answered Jul 26, 2021 at 11:24

TalOrlanczyk

1,2139 silver badges21 bronze badges

1 Comment

TalOrlanczyk Over a year ago

@Negin msr hope this. answer helps you

Collectives™ on Stack Overflow

Problem with fetching and loop between data

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related