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

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

jsxconst state = useState('prod');

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

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

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

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

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

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

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

jsximport React, { useState } from 'react';

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

export default App;

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