#02_filtrowanie

Opis Filtrowanie w React najczęściej robi się metodą .filter(). Najpierw wybierasz dane, które pasują do warunku, a potem je wyświetlasz przez .map().

REACTcopyfunction App() {
  const liczby = [1, 2, 3, 4, 5, 6, 7, 8];

  const parzyste = liczby.filter((liczba) => liczba % 2 === 0);

  return (
    <div>
      <h1>Liczby parzyste</h1>

      {parzyste.map((liczba) => (
        <p key={liczba}>{liczba}</p>
      ))}
    </div>
  );
}

export default App;

#Filtrowanie po tekście

REACTcopyimport { useState } from "react";

function App() {
  const produkty = ["Laptop", "Myszka", "Monitor", "Klawiatura", "Telefon"];
  const [szukaj, setSzukaj] = useState("");

  const przefiltrowane = produkty.filter((produkt) =>
    produkt.toLowerCase().includes(szukaj.toLowerCase())
  );

  return (
    <div>
      <h1>Wyszukiwarka produktów</h1>

      <input
        type="text"
        placeholder="Wpisz nazwę"
        value={szukaj}
        onChange={(e) => setSzukaj(e.target.value)}
      />

      {przefiltrowane.map((produkt, index) => (
        <p key={index}>{produkt}</p>
      ))}
    </div>
  );
}

export default App;

#Filtrowanie po cenie

REACTcopyimport { useState } from "react";

function App() {
  const produkty = [
    { id: 1, nazwa: "Myszka", cena: 50 },
    { id: 2, nazwa: "Klawiatura", cena: 120 },
    { id: 3, nazwa: "Monitor", cena: 700 },
    { id: 4, nazwa: "Pendrive", cena: 30 }
  ];

  const [maxCena, setMaxCena] = useState(100);

  const tanieProdukty = produkty.filter((produkt) => produkt.cena <= maxCena);

  return (
    <div>
      <h1>Produkty do {maxCena} zł</h1>

      <input
        type="number"
        value={maxCena}
        onChange={(e) => setMaxCena(Number(e.target.value))}
      />

      {tanieProdukty.map((produkt) => (
        <div key={produkt.id}>
          {produkt.nazwa} - {produkt.cena} zł
        </div>
      ))}
    </div>
  );
}

export default App;

#Filtrowanie po kategorii

REACTcopyimport { useState } from "react";

function App() {
  const rzeczy = [
    { id: 1, nazwa: "Jabłko", kategoria: "owoce" },
    { id: 2, nazwa: "Marchew", kategoria: "warzywa" },
    { id: 3, nazwa: "Banan", kategoria: "owoce" },
    { id: 4, nazwa: "Pomidor", kategoria: "warzywa" }
  ];

  const [kategoria, setKategoria] = useState("owoce");

  const wynik = rzeczy.filter((rzecz) => rzecz.kategoria === kategoria);

  return (
    <div>
      <h1>Filtrowanie kategorii</h1>

      <button onClick={() => setKategoria("owoce")}>Owoce</button>
      <button onClick={() => setKategoria("warzywa")}>Warzywa</button>

      {wynik.map((rzecz) => (
        <p key={rzecz.id}>{rzecz.nazwa}</p>
      ))}
    </div>
  );
}

export default App;