W React komponenty muszą reagować na zmiany danych i aktualizować interfejs użytkownika. Zwykłe zmienne nie powodują ponownego renderowania komponentu po zmianie wartości, dlatego nie nadają się do przechowywania stanu. Hook useState rozwiązuje ten problem, umożliwiając przechowywanie danych, których zmiana automatycznie aktualizuje widok. Pobawmy się tym.
Utwórz projekt za pomocą Vite i dodaj poniższy kod:
App.jsx
import Box from "./components/Box";
import { useState } from "react";
function App() {
// Deklaracja stanu 'licznik' oraz funkcji aktualizującej ten stan
// Początkowa wartość licznika wynosi 0
// Dziwna składnia wynika z użycia destructuringu:
// useState() zwraca tablicę dwuelementową - dajemy nazwy tym elementom
const [licznik, setLicznik] = useState(0);
// funkcja anonimowa strzałkowa przypisana do stałej jest
// równoważna z zakomentowaną wersją :)
//
// function dodaj1() {
// setLicznik(licznik + 1);
// }
const dodaj1 = () => {
setLicznik(licznik + 1)
};
return (
<>
<h2>Licznik: {licznik}</h2>
<Box text="Adam" action={dodaj1} />
<Box text="Ewa" action={dodaj1} />
<Box text="Stefan" action={dodaj1} />
<Box text="Edek" action={dodaj1} />
</>
);
}
export default App;components/Box.jsx
import Guzik from "./Guzik";
function Box({ text, action }) {
return (
<div>
<p>Właścicielem tego boxa jest: {text}</p>
<Guzik akcja={action} napis={text} />
</div>
);
}
export default Box;components/Guzik.jsx
function Guzik({ akcja, napis}) {
return (
<button onClick={akcja}>
{napis} powiększa licznik
</button>
);
}
export default Guzik;
- Dodaj w Boxach przyciski pomniejszające wspólny licznik.
- Dodaj indywidualny licznik do każdego Boxa wraz z dodatkowym przyciskiem powiększającym go. W tym celu przyda się nowa zmienna dla stanu komponentu Box.
- Zmień działanie przycisków tak by jeden przycisk powiększał oba liczniki: indywidualny oraz wspólny.
Twój komentarz