Állapotok használata Reactban

Használjuk a useState függvényt egy terméknevet tartalmazó állapot létrehozásához:

const state = useState('prod');

Ennek eredményeképpen a state konstans egy tömb lesz, melynek első eleme a termék neve, második eleme pedig a név megváltoztatására szolgáló függvény:

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

A rövidség kedvéért általában nem használnak köztes konstanst a tömbhöz, hanem destruktúrációt alkalmaznak:

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

Most jelenítsük meg állapotunkat a termék nevével valamilyen felépítésben:

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

Gyűjtsük össze az egészet, és megkapjuk a következő kódot:

import React, { useState } from 'react';

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

export default App;

Ha ezt a kódot futtatjuk, akkor kezdetben a divben az állapot kezdeti értéke jelenik meg, esetünkben a 'prod'. Amikor az állapotot megváltoztatjuk a setName függvénnyel, akkor a felépítésben automatikusan megjelenik az állapot új értéke.

Tegyük fel, hogy meg szeretnél jeleníteni a képernyőn egy felhasználó adatait: az ő nevét, vezetéknevét, életkorát. Készíts ehhez a megfelelő állapotokat kezdeti értékekkel.