Facebook
From Bistre Leopard, 2 Months ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 34
  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;