#04wyswietlaniedanych

Opis Wyświetlanie danych w React polega na wpisywaniu zmiennych w {}. Można wyświetlać tekst, liczby, tablice, obiekty i wyniki funkcji.

REACTcopyfunction App() {
  const imie = "Kuba";
  const wiek = 18;

  return (
    <div>
      <h1>Dane użytkownika</h1>
      <p>Imię: {imie}</p>
      <p>Wiek: {wiek}</p>
    </div>
  );
}

export default App;

#Wyświetlanie obiektu

REACTcopyfunction App() {
  const uczen = {
    imie: "Kuba",
    klasa: "4TP",
    srednia: 5.2
  };

  return (
    <div>
      <h1>Uczeń</h1>
      <p>Imię: {uczen.imie}</p>
      <p>Klasa: {uczen.klasa}</p>
      <p>Średnia: {uczen.srednia}</p>
    </div>
  );
}

export default App;

#Warunkowe wyświetlanie danych

REACTcopyfunction App() {
  const zalogowany = true;

  return (
    <div>
      <h1>Panel</h1>

      {zalogowany ? (
        <p>Jesteś zalogowany</p>
      ) : (
        <p>Nie jesteś zalogowany</p>
      )}
    </div>
  );
}

export default App;

#Wyświetlanie danych po kliknięciu

REACTcopyimport { useState } from "react";

function App() {
  const [pokaz, setPokaz] = useState(false);

  return (
    <div>
      <h1>Ukryte dane</h1>

      <button onClick={() => setPokaz(!pokaz)}>
        {pokaz ? "Ukryj" : "Pokaż"}
      </button>

      {pokaz && <p>To jest ukryty tekst.</p>}
    </div>
  );
}

export default App;