React-এ স্টেট লিফটিং

প্রায়শই একাধিক কম্পোনেন্টের একই পরিবর্তনশীল ডেটা প্রতিফলিত করা উচিত। React-এ সাধারণ অবস্থাকে নিকটতম সাধারণ পূর্বপুরুষের কাছে তুলে নেওয়ার পরামর্শ দেওয়া হয়। আসুন একটি উদাহরণ দিয়ে দেখি।

ধরুন আমরা একটি জল তাপমাত্রা ক্যালকুলেটর বানাতে চাই। এটি একটি ইনপুট ফিল্ড হবে যেখানে ব্যবহারকারী তাপমাত্রা লিখবেন, এবং একটি অনুচ্ছেদ যেখানে রায় 출력 করা হবে: জল তরল, জল কঠিন, জল বায়বীয়।

ধরুন আমাদের ক্যালকুলেটর একটি কন্টেইনার কম্পোনেন্ট Calculator:

function Calculator() {
	return <div>
		
	</div>;
}

তাপমাত্রা ইনপুট ফিল্ডটিকে একটি কম্পোনেন্টে নিয়ে যাই TempInp, এবং রায় সহ অনুচ্ছেদ - কম্পোনেন্টে Verdict:

function Calculator() {
	return <div>
		<Verdict />
		<TempInp />
	</div>;
}

বুঝতে সহজ যে TempInp এবং Verdict উভয়েরই তাপমাত্রা সহ একটি স্টেট থাকা উচিত। এটা যুক্তিসঙ্গত যে এটি একই তাপমাত্রা হওয়া উচিত: ইনপুট ফিল্ডে ডেটা প্রবেশ করার সাথে সাথে রায় প্রদর্শিত হওয়া উচিত।

এই ক্ষেত্রে, একটি কৌশল ব্যবহার করার পরামর্শ দেওয়া হয়, যাকে স্টেট লিফটিং বলা হয়: স্টেট, যা দুই (বা তার বেশি) কম্পোনেন্টের জন্য সাধারণ তাকে উপরে তুলে নেওয়া হয় তাদের সাধারণ প্যারেন্টের কাছে।

আমাদের ক্ষেত্রে দেখা যাবে যে তাপমাত্রা সহ স্টেট Calculator কম্পোনেন্টের অন্তর্গত হওয়া উচিত, যা এটিকে TempInp এবং Verdict-এ প্রপ্স হিসেবে প্রেরণ করবে:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} />
	</div>;
}

TempInp কম্পোনেন্টে একটি ইনপুট ফিল্ড থাকা উচিত তাপমাত্রা পরিবর্তন করার জন্য। কিন্তু, যেহেতু এই তাপমাত্রাটি এই কম্পোনেন্টের একটি প্রপ্স, সরাসরি TempInp-এ এটিকে পরিবর্তন করা যায় না। সঠিক হবে কম্পোনেন্ট Calculator থেকে একটি বিশেষ ফাংশন প্রেরণ করা তাপমাত্রা পরিবর্তন করার জন্য:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	function changeTemp(event) {
		setTemp(event.target.value);
	}
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} changeTemp={changeTemp} />
	</div>;
}

যাইহোক, একটি নতুন ফাংশন প্রবর্তন না করে, চাইল্ড কম্পোনেন্টে setTemp ফাংশনটি প্রেরণ করা যেতে পারে:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} setTemp={setTemp} />
	</div>;
}

TempInp এবং Verdict কম্পোনেন্টগুলির বাস্তবায়ন লিখুন।

3টি কাজ নিয়ে আসুন যেখানে স্টেট লিফটিং ব্যবহার করা প্রয়োজন। এই কাজগুলির সমাধান লিখুন।