React में कॉन्टेक्स्ट अपडेट करना

इस पाठ में हम कॉन्टेक्स्ट के मान बदलने पर कंपोनेंट्स के अपडेट होने पर विचार करेंगे। मान लीजिए कि आप चाहते हैं कि कॉन्टेक्स्ट बदल जाए।

इस मामले में स्टेट्स के संयोजन में कॉन्टेक्स्ट लागू करना उपयोगी है। आइए हम अपने बॉक्स वाले एप्लिकेशन को थोड़ा बदल दें, जो हमने पिछले पाठ में बनाया था और इसे ऐसा बनाएं कि बटन दबाने पर पारित किया गया मान 'metal box :)' बन जाए।

तो, हमारी App फ़ाइल लेते हैं और BigBox के बाद एक बटन बनाते हैं:

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
			<button>click</button>
		</MyContext.Provider>
	);
}

अगला, हम useState हुक इम्पोर्ट करते हैं और एक name स्टेट बनाते हैं, जिसका मान बटन दबाने पर बदल जाएगा। इसका प्रारंभिक मान वह बनाते हैं जो हम तुरंत कॉन्टेक्स्ट के मान के रूप में पास करते थे, यानी 'small box :)':

function App() {
	const [name, setName] = useState('small box :)');
}

इस बार हम कॉन्टेक्स्ट के रूप में स्ट्रिंग नहीं, बल्कि name स्टेट पास करेंगे:

<MyContext.Provider value={name}>
	<BigBox />
	<button>click</button>
</MyContext.Provider>

अंतिम चरण के रूप में, हम बटन पर क्लिक के लिए हैंडलर को कॉल करेंगे और फ़ंक्शन setName की सहायता से स्टेट का नया मान 'metal box :)' पर सेट करेंगे। इसके बाद आप बटन पर क्लिक करके परिणाम की जांच कर सकते हैं:

<button onClick={() => {
	setName('metal box :)');
}}>click</button>

पिछले पाठ के कार्यों को हल करते समय आपके द्वारा बनाए गए एप्लिकेशन का उपयोग करें। एक age स्टेट बनाएं, जिसे आप App से कॉन्टेक्स्ट का उपयोग करके संख्या के बजाय पास करेंगे, इसका प्रारंभिक मान 50 सेट करें। App में Parent कंपोनेंट के नीचे एक बटन जोड़ें, जिस पर हर क्लिक करने पर स्टेट age का मान 2 से कम हो जाएगा।