React Native-এ State কী?

State হলো সেই জায়গা থেকে যেখানে ডেটা আসে। আমাদের সবসময় চেষ্টা করা উচিত state यथাসম্ভব সিম্পল রাখা এবং stateful কম্পোনেন্টের সংখ্যা কমাতে। যদি আমাদের কাছে দশটি কম্পোনেন্ট থাকে যাদের state থেকে ডেটা দরকার, তবে আমাদের একটি কন্টেইনার কম্পোনেন্ট তৈরি করা উচিত যা उन সবের জন্য state রাখবে।

উদাহরণ ১

বাটন টাইটেল ON/OFF হবে যখন ইউজার বাটনটি প্রেস করবে।

State কনস্ট্রাক্টরে ইনিশিয়ালাইজ করা হয় নিচের মতো:

constructor(props) {
    super(props);
    this.state = { isToggle: true };
}

isToggle হলো state-এ দেওয়া একটি বুলিয়ান ভ্যালু। বাটনের টাইটেল isToggle প্রপার্টির উপর ভিত্তি করে নির্ধারিত হয়। ভ্যালু true হলে বাটনের টাইটেল ON, অন্যথায় OFF।

যখন বাটন প্রেস করা হয়, onPress মেথড কল হয় যা setState কল করে isToggle ভ্যালু আপডেট করে নিচের মতো:

onPress={() => {
    this.setState({ isToggle: !this.state.isToggle });
}}

ইউজার বাটনে ক্লিক করলে onPress ইভেন্ট ফায়ার হবে এবং setState isToggle প্রপার্টির state পরিবর্তন করবে।

App.js

import React, { Component } from "react";
import { Text, View, Button, Alert } from 'react-native';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { isToggle: true };
    }
    render(props) {
        return (
            
                 {
                        this.setState({ isToggle: !this.state.isToggle });
                    }}
                    title={this.state.isToggle ? 'ON' : "OFF"}
                    color="green"
                />
            
        );
    }
}
export default App;

আউটপুট

ইউজার বাটন প্রেস করলে বাটন টগল হবে।

উদাহরণ ২

ইউজার ক্লিক করলে টেক্সট পরিবর্তন হবে।

নিচের উদাহরণে, state কনস্ট্রাক্টরে ডিক্লেয়ার করা হয়েছে নিচের মতো:

constructor(props) {
    super(props);
    this.state = { myState: 'Welcome to Tutorialspoint' };
}

State myState Text কম্পোনেন্টে ডিসপ্লে করা হয়েছে নিচের মতো:

{this.state.myState}

ইউজার টেক্সট টাচ বা প্রেস করলে onPress ইভেন্ট ফায়ার হবে এবং this.changeState মেথড কল হবে যা myState আপডেট করে টেক্সট পরিবর্তন করবে নিচের মতো:

changeState = () => this.setState({myState: 'Hello World'})

import React, { Component } from "react";
import { Text, View, Button, Alert } from 'react-native';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { myState: 'Welcome to Tutorialspoint' };
    }
    changeState = () => this.setState({myState: 'Hello World'})
    render(props) {
        return (
            
                
                    
                        {this.state.myState}
                    
                
            
        );
    }
}
export default App;

আউটপুট