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.






Add Comment

* Required information
1000

Comments

No comments yet. Be the first!

Most Viewed Articles (in React-Native )

use axios in Expo to call APIs

Remove all installed dependencies and install them again

Start background location tracking after login in expo react native

'import' and 'export' may only appear at the top level - React Native

react-native-background-job alternative in expo app

Session variables in React Native - Expo

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

set up a global error handler in React Native (expo)

Error Handling in TextInput - React Native

Some dependencies are incompatible with the installed expo version:

loadAsync() vs useFonts() in expo - react native

npm install vs npx expo install

expo-secure-store to store sensitive data securely in React Native

react-native-android-location-services-dialog-box alternative in expo

expo-secure-store vs expo-file-system in expo - react native

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native