Programming Tutorials

state vs props in React Native

By: Farida in React-Native Tutorials on 2023-04-05  

In React Native, state and props are two important concepts that allow you to manage and update the behavior and appearance of your app components.

State:

state is a built-in object in React that allows you to store and manage component-specific data. You can change the value of state using the setState() method, which triggers a re-render of the component and its child components.

Here's an example of how you can use state in a React Native component:

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

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    return (
      <view>
        <text>Count: {this.state.count}</text>
        <button title="Increment" onpress="{this.incrementCount}"></button>
      </view>
    );
  }
}

export default MyComponent;

In this example, we define a class-based component called MyComponent. In the constructor, we initialize the state object with a property called count that is set to 0. We also define a method called incrementCount that uses the setState() method to update the value of count when the button is pressed. Finally, we render the value of count in a Text component and a button that triggers the incrementCount method.

Props:

props stands for "properties" and is a way to pass data and configuration to a component from its parent component. Props are read-only and cannot be changed within the component itself.

Here's an example of how you can use props in a React Native component:

import React from 'react';
import { Text, View } from 'react-native';

const MyComponent = (props) => {
  return (
    <View>
      <Text>Hello, {props.name}!</Text>
    </View>
  );
}

export default MyComponent;

In this example, we define a functional component called MyComponent. The component takes a single prop called name, which is used to render a personalized greeting message. When the component is used in another component, we can pass a value for the name prop like this:

import React from 'react';
import { View } from 'react-native';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <View>
      <MyComponent name="John" />
    </View>
  );
}

export default App;

In this example, we import the MyComponent component and use it in the App component. We pass the value "John" for the name prop, which is used to render the message "Hello, John!" in the MyComponent component.

By using state and props in your React Native components, you can build dynamic and flexible user interfaces that can respond to user input and data changes.