Uporaba state-ov v Reactu

Uporabimo funkcijo useState za ustvarjanje state-a, ki vsebuje ime produkta:

const state = useState('prod');

Kot rezultat bo konstanta state predstavljala array, v katerem bo v prvem elementu shranjeno ime produkta, v drugem pa funkcija za spreminjanje imena:

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

Za kratkost običajno ne uporabljajo vmesne konstante za array, ampak uporabijo destrukturiranje:

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

Izpišimo zdaj naš state z imenom produkta v neko markup:

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

Zberimo vse skupaj in dobimo naslednjo kodo:

import React, { useState } from 'react';

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

export default App;

Če zaženemo to kodo, se bo sprva v div-u izpisala začetna vrednost state-a, v našem primeru 'prod'. Ob spremembi state-a preko funkcije setName se bo v markup-u avtomatično pojavila nova vrednost state-a.

Recimo, da želite na zaslonu prikazati podatke uporabnika: njegovo ime, priimek, starost. Ustvarite za to ustrezne state-e z začetnimi vrednostmi.