#06duzyprzykladlistaproduktow

Opis Jeden większy przykład z Reacta: formularz, dodawanie, mapowanie, filtrowanie i walidacja.

REACTcopyimport { useState } from "react";

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

  const [nazwa, setNazwa] = useState("");
  const [cena, setCena] = useState("");
  const [szukaj, setSzukaj] = useState("");
  const [blad, setBlad] = useState("");

  function dodajProdukt(e) {
    e.preventDefault();

    if (nazwa.length < 2) {
      setBlad("Nazwa musi mieć minimum 2 znaki");
      return;
    }

    if (Number(cena) <= 0) {
      setBlad("Cena musi być większa od 0");
      return;
    }

    const nowyProdukt = {
      id: Date.now(),
      nazwa: nazwa,
      cena: Number(cena)
    };

    setProdukty([...produkty, nowyProdukt]);
    setNazwa("");
    setCena("");
    setBlad("");
  }

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

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

      <form onSubmit={dodajProdukt}>
        <input
          placeholder="Nazwa produktu"
          value={nazwa}
          onChange={(e) => setNazwa(e.target.value)}
        />

        <input
          type="number"
          placeholder="Cena"
          value={cena}
          onChange={(e) => setCena(e.target.value)}
        />

        <button type="submit">Dodaj</button>
      </form>

      {blad && <p style={{ color: "red" }}>{blad}</p>}

      <hr />

      <input
        placeholder="Szukaj produktu"
        value={szukaj}
        onChange={(e) => setSzukaj(e.target.value)}
      />

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

export default App;