React useEffect and iterating over array using Vimeo API

Question

I have an array of trying to grab four thumbnail jpgs' from using the vimeo API. I have an array of video ids

const vimeo = [
    "325845565","325846054","325848270","325849439"
]

I'm using setState to import and use the arrays

import vimeo;

const [data , setData ] = useState(vimeo)

I have a separate state where I would like to store the thumbnails data:

const [thumbNails, setThumbNails] = useState({
    data : []
})

Id like to be able to iterate over each vimeo id inside the useEffect hook. I'm using axios something like:

useEffect(() => {
    const fetchData = async () => {
        data.map(videoID => {
            const result = await axios(`http://vimeo.com/api/v2/video/${data[0]}.json`);
            setThumbNails({
                data : result
            })
        }
        })

    fetchData()
},[])

but with this code im getting the following error:

Parsing error: Can not use keyword 'await' outside an async function

Any thoughts? Thanks.

Parser error aside (you've just misplaced the async declaration, it should be on the data.map callback not fetchData) how do you expect this code to work? At the moment it would always overwrite the last thumbnail that you fetch. Also, result in this case would be an axios response, I presume you'd want data: result.data... — James
– James, Commented May 22, 2019 at 14:38

Vencovsky · Accepted Answer · 2019-05-22 15:24:00Z

0

That a look at this answer and also what I found on google

You will need to use Promise.all and then setState with the array returned

const fetchData = async () => {
    let fetchedResult = await Promise.all(data.map(videoID => 
        axios(`http://vimeo.com/api/v2/video/${data[0]}.json`)
    ))
    fetchedResult.map(data => setThumbNails({
            data : result
        }))
}

edited May 22, 2019 at 15:24

answered May 22, 2019 at 14:21

Vencovsky

32.1k25 gold badges132 silver badges202 bronze badges

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

6 Comments

James Over a year ago

Although this is syntactically correct, the map code in general looks all wrong.

Vencovsky Over a year ago

@James Why the map code in general looks all wrong ? I copied your code and added the correct async.

James Over a year ago

@Vencovksy I'm not the OP (same name).

Vencovsky Over a year ago

@James you got me hahaha

James Over a year ago

Thanks but I don't' think I can use the await as a parameter inside the map function BTW I am the OP :)

|

Collectives™ on Stack Overflow

React useEffect and iterating over array using Vimeo API

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related