React में स्टेट की रिएक्टिविटी

आइए अब देखते हैं कि रिएक्टिविटी कैसे काम करती है। यह ऐसा करती है कि स्टेट बदलने पर बदलाव तुरंत स्क्रीन पर दिखाई देते हैं।

आइए एक उदाहरण पर नजर डालते हैं। मान लीजिए कि हमारे पास उत्पाद के नाम वाला एक स्टेट है:

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

आइए उत्पाद का नाम वर्स्ट में दिखाएं:

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

आइए अब एक बटन बनाएं, जिस पर क्लिक करने से हमारा स्टेट बदल जाए:

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

क्लिक हैंडलर में हम setName फंक्शन का उपयोग करेंगे, ताकि उत्पाद का नया नाम सेट कर सकें:

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

आइए अपना सारा कोड एक साथ जोड़ते हैं। ऐसा होगा कि बटन दबाने के बाद टेक्स्ट तुरंत नए मान में बदल जाएगा:

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

अलग-अलग हैंडलर फंक्शन का उपयोग करना जरूरी नहीं है। अनाम एरो फंक्शन का उपयोग किया जा सकता है:

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

यूजर के नाम और उपनाम वाले स्टेट दिए गए हैं। उन्हें वर्स्ट में दिखाएं। इन स्टेट्स को बदलने के लिए बटन बनाएं।