Matumizi ya States katika React

Tutumie kitendo useState kwa ajili ya kuunda state inayokubua jina la bidhaa:

const state = useState('prod');

Kwa matokeo, thabiti state itawakilisha safu, ambapo kipengele cha kwanza kitaweka jina la bidhaa, na cha pili - kitendo kwa ajili ya kubadilisha jina:

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

Kwa ufupi kawaida hautumii thabiti ya kati kwa ajili ya safu, bali hutumia destructuring:

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

Sasa hebu tuonyeshe state yetu iliyo na jina la bidhaa kwenye muundo wowote:

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

Hebu tuweke pamoja na tupate msimbo ufuatao:

import React, { useState } from 'react';

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

export default App;

Kama ukaribu msimbo huu, awali ndani ya div itaonyeshwa thamani ya awali ya state, kwa upande wetu 'prod'. Wakati wa kubadilisha state kupitia kitendo setName muundo utaonyesha automatikally thamani mpya ya state.

Tuchukue unataka kuonyesha kwenye skrini data za user: jina lake, jina la ukoo, umri. Fanyia hii states zinazofaa zilizo na thamani za awali.