React-এ স্টেট ব্যবহার

পণ্যের নাম ধারণকারী একটি স্টেট তৈরি করতে useState ফাংশনটি ব্যবহার করি:

const state = useState('prod');

ফলস্বরূপ, state ধ্রুবকটি একটি অ্যারে হবে, যার প্রথম উপাদানে পণ্যের নাম সংরক্ষিত থাকবে, এবং দ্বিতীয়টিতে নাম পরিবর্তনের ফাংশন থাকবে:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

সংক্ষিপ্ততার জন্য, সাধারণত অ্যারের জন্য মধ্যবর্তী ধ্রুবক ব্যবহার করা হয় না, বরং ডেস্ট্রাকচারিং ব্যবহার করা হয়:

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

এখন কিছু মার্কআপে আমাদের পণ্যের নাম সহ স্টেটটি আউটপুট করা যাক:

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

এখন সব একত্রিত করি এবং নিম্নলিখিত কোড পাই:

import React, { useState } from 'react';

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

export default App;

যদি এই কোডটি চালানো হয়, তাহলে শুরুতে div-এ স্টেটের প্রাথমিক মান আউটপুট হবে, আমাদের ক্ষেত্রে 'prod'। setName ফাংশনের মাধ্যমে স্টেট পরিবর্তন করলে মার্কআপে স্বয়ংক্রিয়ভাবে স্টেটের নতুন মান উপস্থিত হবে।

ধরুন আপনি ব্যবহারকারীর ডেটা স্ক্রিনে প্রদর্শন করতে চান: তার নাম, উপাধি, বয়স। এর জন্য প্রাথমিক মান সহ সংশ্লিষ্ট স্টেট তৈরি করুন।