Używanie stanów w React

Skorzystajmy z funkcji useState, aby utworzyć stan zawierający nazwę produktu:

const state = useState('prod');

W rezultacie stała state będzie reprezentować tablicę, w pierwszym elemencie której będzie przechowywana nazwa produktu, a w drugim - funkcja do zmiany nazwy:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

Dla zwięzłości zwykle nie używa się stałej pośredniej dla tablicy, ale wykorzystuje się destrukturyzację:

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

Spróbujmy teraz wypisać nasz stan z nazwą produktu w jakimś kodzie HTML:

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

Zbierzmy wszystko razem i otrzymamy następujący kod:

import React, { useState } from 'react';

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

export default App;

Jeśli uruchomimy ten kod, to początkowo w divie wyświetli się początkowa wartość stanu, w naszym przypadku 'prod'. Przy zmianie stanu za pomocą funkcji setName w kodzie HTML automatycznie pojawi się nowa wartość stanu.

Załóżmy, że chcesz wyświetlać na ekranie dane użytkownika: jego imię, nazwisko, wiek. Utwórz dla tego odpowiednie stany z wartościami początkowymi.