1. import React, { useEffect, useState } from 'react';
2.  
3.  
4. const WeatherList = () => {
5.  
6.     const [weatherArray, setWeatherArray] = useState([]);
7.     const [weatherArrayAfterFilter, setWeatherArrayAfterFilter] = useState([]);
8.  
9.     useEffect(()=>{
10.         fetch('https://danepubliczne.imgw.pl/api/data/synop/')
11.         .then(resp=>resp.json())
12.         .then(weather=>{
13.             setWeatherArray(weather);
14.             setWeatherArrayAfterFilter(weather);
15.         });
16.     }, []);
17.  
18.  
19.     let weatherBoxes = weatherArrayAfterFilter.map(cityWeather=>{
20.         return (
21.             <div key={cityWeather.id_stacji}>
22.                 <h2>{cityWeather.stacja}</h2>
23.                 <p>{cityWeather.temperatura} st. C.</p>
24.                 <p>{cityWeather.cisnienie} hPa</p>
25.             </div>
26.         );
27.     });
28.  
29.  
30.     const filterWeather = e => {
31.  
32.         let filteredWeatherArray = weatherArray.filter(cityWeather=>{
33.             return cityWeather.stacja.toUpperCase().includes(e.target.value.toUpperCase());
34.         });
35.         setWeatherArrayAfterFilter(filteredWeatherArray);
36.     }
37.  
38.     return (
39.         <div className="weather-list">
40.             <input type="text" placeholder="filtruj" onChange={filterWeather} />
41.             {weatherBoxes}
42.         </div>
43.     )
44. }
45.  
46. export default WeatherList;