আমরা যখন প্রোগ্রাম বা ডেভলপার হওয়ার জন্য ওয়েব ডেভলপমেন্ট এর জগতে আসি তখন প্রথমেই HTML, CSS এবং JavaScript শেখা শুরু করে দেয়। এরপর এই শেখা চলতেই থাকে। এরপর React, Vue, Svelte এর মতো ফ্রন্টেন্ড ফ্রেমওয়ার্ক বা লাইব্রেরি শিখতে শুরু করি।

কিন্তু অনেকে রিয়েক্টজেএস শেখা শুরু করি। এরপর থেকে আমাদের এই জার্নি চলতে থাকে। আমরা একটা পর্যায় যেয়ে reactjs এর state এর সাথে পরিচিত হই এবং অধিকাংশ ডাটা স্টোর করি এই hook এর মাধ্যমে।

এখন আমরা reactjs এর state কে মোডিফাই করা শিখবো।

অনেক সময় আমরা স্টেস্ট বর্তমান ভ্যালু পরিবর্তন করা লাগতে পারে। তখন আমরা নিচের মতো করে ভ্যালু পরিবর্তন করে থাকি।

const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  }

  const handleDecrement = () => {
    setCount(count - 1);
  }

এখানে সেট ফাংশনের ভ্যালু পরিবর্তন করা হয়েছে count এর বর্তমান ভ্যালু'র সাথে ১ ইনক্রিমেন্ট বা ডিক্রিমেন্ট করে। কিন্তু এখানে আমরা একই component এ ইনক্রিমেন্ট এবং ডিক্রিমেন্ট করা হয়েছে সেই জন্য আমাদের তেমন একটা সমস্যা দেখছি না। কিন্তু আমরা যখন প্যারেন্ট কম্পনেন্ট এ state ডিক্লিয়ার করে props পাস করে আমরা ডাটা ব্যবহার করি।

কিন্তু বিপত্তি হয় যখন Boolean, Count, Filter, Find ইত্যাদি ধরনের ডাটা নিয়ে কাজ করি। অনেক সময় এমনও হতে পারে যে আমাদের বর্তমান ডাটা update করা লাগছে। কিন্তু আমাদের variable এবং setState ফাংশন ভিন্ন component আছে। এখন যদি উপরের নিয়মে ডাটা পরিবর্তন করতে চাই তাহলে count, setState কে props আকারে পাস করতে হবে। যা খুবই ঝামেলা যুক্ত হতে পারে।

কিন্তু যদি চাই যে শুধু মাত্র কোনো একটা ইভেন্ট ঘটলে setState এর মাধ্যমে count এর ডাটা পরিবর্তন হবে তাহলে কেমন হবে? নিশ্চয় অনেক ভালো হবে। তাহলে চলুন কিভাবে setState ফাংশন কে মোডিফাই করে আমরা সেই state এর ভেরিয়েবল এর ডাটা পরিবর্তন করতে পারি।

const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount((prevData) => prevData + 1);
  }

  const handleDecrement = () => {
    setCount((prevData) => prevData - 1);
  }

উপরে দেখানো হয়েছে কিভাবে আমরা শুধু মাত্র setState ফাংশন কে মোডিফাই করতে পারি। উপরে যদিও রিটার্ন কে শর্টকার্ট করে ব্যবহার করা হয়েছে es6 এর অ্যারো ফাংশন ব্যবহার করে।

চাইলে নিচের মতো করে লেখা যাবে--

const [count, setCount] = useState(0);

const handleIncrement = () => {
    setCount((prevData) => {
        return prevData + 1
    });
  }

  const handleDecrement = () => {
    setCount((prevData) => {
        return prevData - 1
    });
  }

বিস্তারিত আসা যাক- প্রথমে setState ফাংশন এর ভিতর একটা callback ফাংশন নিয়েছি। callback ফাংশন একটা প্যারামিটার রিসিভ করে যার ভিতরে state এর বর্তমান data থাকে এবং আমরা সেই ডাটাকে যে ভাবে ইচ্ছা মোডিফাই করে আবার রিটার্ন করে দিলেই state আপডেট হয়ে যায়।

নিচে আরও কিছু উদাহরণ দেখবো--

ধরুন, একটা state এ ১ থেকে ২০ পর্যন্ত নাম্বারের অ্যারে আছে যেখানে আমরা prime number, odd number, even number বের করবো।

প্রথমে একটা স্টেট এ ইনিশিয়াল ভাবে ১ থেকে ২০ পর্যন্ত নাম্বার নিবো।

 const [count, setCount] = useState([1,2,3,4,5,6,7,8,9,10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);

console.log(count) //[1,2,3,4,5,6,7,8,9,10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

এখন আমরা setState ফাংশন মোডিফাই করে শুধু মাত্র prime number বের করবো।

const primeNumber = () => {
    setCount((prevData) => {
        const primeNumbers = prevData.filter((number) => {
            for (let i = 2; i < number; i++) {
                if (number % i === 0) {
                    return false;
                }
            }
            return number > 1;
        });
        return primeNumbers;
    });
  }

// Output
console.log(count) // [2, 3, 5, 7, 11, 13, 17, 19]

setState ফাংশন মোডিফাই করে এখন odd number বের করবো।

const oddNumber = () => {
    setCount((prevData) => {
        const oddNumbers = prevData.filter((number) => number % 2 !== 0);
        return oddNumbers;
    });
  }

//--Output
console.log(count) // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]

setState ফাংশন মোডিফাই করে এখন even number বের করবো।

const evenNumber = () => {
    setCount((prevData) => {
        const evenNumbers = prevData.filter((number) => number % 2 === 0);
        return evenNumbers;
    });
  }
//--Output
console.log(count) // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

এই রকম ভাবে আরও অনেক কাজ করতে পারবো স্টেট মোডিফাই করার মাধ্যমে।

ধন্যবাদ।