Reaktywność stanów w React

Przyjrzyjmy się teraz, jak działa reaktywność. Sprawia ona, że przy zmianie stanu zmiany są natychmiast wyświetlane na ekranie.

Spójrzmy na przykład. Załóżmy, że mamy stan z nazwą produktu:

const [name, setName] = useState('prod');

Wyświetlmy nazwę produktu w werscie:

return <div>
	<span>{name}</span>
</div>;

Stwórzmy teraz przycisk, po kliknięciu którego nasz stan będzie się zmieniać:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

W procedurze obsługi kliknięcia użyjmy funkcji setName, aby ustawić produktowi nową nazwę:

function clickHandler() {
	setName('xxxx');
}

Złóżmy cały nasz kod razem. Okaże się, że po naciśnięciu przycisku tekst natychmiast zmieni się na nową wartość:

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

Używanie oddzielnych funkcji obsługi nie jest obowiązkowe. Można użyć anonimowej funkcji strzałkowej:

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

Dane są stany z imieniem i nazwiskiem użytkownika. Wyświetl je w werscie. Stwórz przyciski do zmiany tych stanów.