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 করে কমবে।