#01_mapowanie

Opis Mapowanie w React to przechodzenie po tablicy i wyświetlanie wielu elementów na stronie. Najczęściej używa się .map(). Każdy element musi mieć key.

REACTcopyimport { useState } from "react";

function App() {
  const owoce = ["Jabłko", "Banan", "Gruszka", "Pomarańcza"];

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

      <ul>
        {owoce.map((owoc, index) => (
          <li key={index}>{owoc}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

#Mapowanie obiektów

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

  return (
    <div>
      <h1>Produkty</h1>

      {produkty.map((produkt) => (
        <div key={produkt.id}>
          <h3>{produkt.nazwa}</h3>
          <p>Cena: {produkt.cena} zł</p>
        </div>
      ))}
    </div>
  );
}

export default App;

#Mapowanie z warunkiem

REACTcopyfunction App() {
  const uczniowie = [
    { id: 1, imie: "Kuba", aktywny: true },
    { id: 2, imie: "Bartek", aktywny: false },
    { id: 3, imie: "Ola", aktywny: true }
  ];

  return (
    <div>
      <h1>Aktywni uczniowie</h1>

      {uczniowie.map((uczen) => (
        <p key={uczen.id}>
          {uczen.imie} - {uczen.aktywny ? "aktywny" : "nieaktywny"}
        </p>
      ))}
    </div>
  );
}

export default App;

#Mapowanie do tabeli

REACTcopyfunction App() {
  const osoby = [
    { id: 1, imie: "Kuba", wiek: 18 },
    { id: 2, imie: "Adam", wiek: 20 },
    { id: 3, imie: "Ola", wiek: 17 }
  ];

  return (
    <div>
      <h1>Osoby</h1>

      <table border="1">
        <thead>
          <tr>
            <th>Imię</th>
            <th>Wiek</th>
          </tr>
        </thead>

        <tbody>
          {osoby.map((osoba) => (
            <tr key={osoba.id}>
              <td>{osoba.imie}</td>
              <td>{osoba.wiek}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;