import React from 'react'
function ForecastItem({ town, data }) {
return <React.Fragment>
<div>
{town} - {JSON.stringify(data)}
</div>
<hr />
</React.Fragment>
}
function App() {
const [forecast, setForecast] = React.useState({})
const memoForecast = React.useMemo(
() => {
return Object.keys(forecast).map(forecastKey => (
<ForecastItem
key={forecastKey}
town={forecastKey}
data={forecast[forecastKey]}
/>
))
},
[forecast]
)
React.useEffect(
() => {
let towns = ["Sudak", "Yalta", "Kerch", "Feodosiya"];
Promise.all(
towns.map(town => fetch(`https://api.weatherbit.io/v2.0/current?city=${town}&key=ced73555abfb464ebcb5d7e77f5be270`)
.then(res => res.json())
.then(json => json.data))
)
.then(response => {
setForecast(towns.reduce((acc, town, i) => {
acc[town] = response[i]
return acc
}, {}))
})
},
[]
)
return memoForecast
}
export default App
если данные нужны глобально можно использовать
https://reactjs.org/docs/context.html