React Native में State क्या है?

State वह जगह है जहां से डेटा आता है। हमें हमेशा अपने state को यथासंभव सरल बनाने का प्रयास करना चाहिए और स्टेटफुल कंपोनेंट्स की संख्या को कम से कम करना चाहिए। यदि हमारे पास उदाहरण के लिए दस कंपोनेंट्स हैं जिन्हें state से डेटा की आवश्यकता है, तो हमें एक कंटेनर कंपोनेंट बनाना चाहिए जो उन सभी के लिए state रखेगा।

उदाहरण 1: बटन दबाने पर शीर्षक ON/OFF टॉगल करना

जब उपयोगकर्ता बटन दबाता है तो बटन शीर्षक ON/OFF में बदल जाता है।

State को कंस्ट्रक्टर के अंदर इनिशियलाइज़ किया जाता है जैसा कि नीचे दिखाया गया है:

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

isToggle स्टेट को दिया गया बूलियन मान है। बटन का शीर्षक 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;

आउटपुट

उपयोगकर्ता द्वारा बटन दबाने पर बटन टॉगल होगा।

उदाहरण 2: टेक्स्ट पर क्लिक करने पर टेक्स्ट बदलना

जब उपयोगकर्ता इस पर क्लिक करता है तो टेक्स्ट बदल जाता है।

नीचे दिए गए उदाहरण में, 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;

आउटपुट