Trying to push to state variable with multiple API call responses

Question

Im using the google maps API for the first time and managed to finally get the map to render to the screen, I'm now working on adding markers of locations that I receive from elsewhere in my application. When I loop through the locations to get their respective lat and lng coordinates, I want to add them to my state variable. Currently the way I have my code, I am getting a response and it is being stored in my state variable, but it is only storing the most recent one rather than all of them.

Whats the best way to add all of these seperate responses from the API to my state variable?

Here is my code currently

     export const MapRender =(props) => {
    const {logs} = useContext(LogContext)
    const [latLong, setLatLong] = useState([])
    
    useEffect(()=>{
        logs.map(l =>{
            return fetch(`https://api.opencagedata.com/geocode/v1/json?q=${l.location}&key=MYKEY&limit=1`)
                .then(res => res.json())
                .then(parsedRes => setLatLong([parsedRes.results[0].geometry]))
            
            
        })
    },[logs])

console.log(latLong) --- returns a separate log for each response object, I want it to return one array with all responses

Answer 1

Updated

I didn't catch this when I first answered, having that cycle that sets the state on each iteration causes a lot of renders to be queued which leads to be the last incoming respobe the one to prevail.

The solution is to store all responses in one array and when all of them are finished you can set the state. You may want to use this to know when all of the promises are done and then set the state.