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

Vencovsky Vencovsky · Accepted Answer · 2019-05-22T14:21:24

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
        }))
}

React useEffect and iterating over array using Vimeo API

1 Answers