Olekute kasutamine Reactis

Kasutame funktsiooni useState toote nime sisaldava oleku loomiseks:

const state = useState('prod');

Tulemusena konstant state esindab massiivi, mille esimeses elemendis hoitakse toote nime, ja teises - funktsiooni nime muutmiseks:

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

Lühiduse huvides tavaliselt ei kasuta vahepealset konstanti massiivi jaoks, vaid kasutatakse destruktureerimist:

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

Väljastame nüüd oma toote nime oleku mõnes veebilehe kujunduses:

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

Kogume kõik kokku ja saame järgmise koodi:

import React, { useState } from 'react';

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

export default App;

Kui käivitada see kood, siis algselt div-is kuvatakse oleku algväärtus, meie puhul 'prod'. Olekut muutes läbi funktsiooni setName, ilmub veebilehe kujundusse automaatselt uus oleku väärtus.

Oletame, et soovid kuvada ekraanil kasutaja andmeid: tema eesnime, perekonnanime, vanust. Tehke selleks vastavad olekud algväärtustega.