Uwepo wa States katika React

Hebu sasa tuangalie jinsi uwepo unavyofanya kazi. Hufanya ili wakati state inapobadilika mabadiliko yanaonyeshwa papo hapo kwenye skrini.

Hebu tuangalie kwa mfano. Tuchukulie tuna state yenye jina la bidhaa:

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

Tuonyeshe jina la bidhaa kwenye muundo:

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

Tutengeneze kifungo ambacho, unapobonyezwa state yetu itabadilika:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

Kwenye kishughulikia kubofya tutumie kitendo setName, kuweka jina jipya la bidhaa:

function clickHandler() {
	setName('xxxx');
}

Hebu tuchanganye msimbo wetu wote pamoja. Itatokea kuwa baada ya kubofya kifungo maandishi yatabadilika mara moja kwa thamani mpya:

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

Matumizi ya vitendo maalum-vishughulikia sio lazima. Unaweza kutumia kitendo kisichojulikana cha mshale:

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

Ametolewa states na jina na jina la ukoo la mtumiaji. Waonyeshe kwenye muundo. Tengeneza vifungo za kubadilisha hizi states.