State and Props in React Native

Aniket Raj

2 September 2024

State and props in React Native; essentially, there are two kinds of data: state and props. The component that uses the state is mutable. Where Props maintain immutability and static nature throughout the lifetime of the component.

Props:-

In React Native, Props are short for Properties. They are immutable and can only customized at the time of their creation with different parameters. You use props to customize a child component by passing data or functions it needs to render or handle events. Props are immutable within the child component, meaning the child cannot modify them.

Code Example –

// App.js
import React from 'react';
import { View, Text } from 'react-native';

// ChildComponent is a functional component that accepts props
const ChildComponent = ({ message }) => {
  return <Text>{message}</Text>;
};

// App is the main component of the application
const App = () => {
  return (
    <View>
      {/* ChildComponent is used here with a 'message' prop */}
      <ChildComponent message="Hello, React Native!" />
    </View>
  );
};

export default App;

// App.js

import React from 'react';

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

// ChildComponent is a functional component that accepts props

const ChildComponent = ({ message }) => {

return <Text>{message}</Text>;

};

// App is the main component of the application

const App = () => {

return (

<View>

{/* ChildComponent is used here with a 'message' prop */}

</View>

);

};

export default App;

key points –

1. Functional Component: ChildComponent is a functional component defined as const ChildComponent = ({ message }) => { ... }.
2. Props: Receives a single prop called message.
3. Rendering: Renders the message prop inside a Text component.
4. Props Usage: ChildComponent is used with a message prop, set to "Hello, React Native!". This demonstrates how to pass data from the parent component (App) to the child component (ChildComponent).

State:–

In React Native, state is a mechanism that allows components to manage and track dynamic data that can change over time. In comparison with props, states are immutable and passed from parent to child components, the component manages the state and updates it based on user interactions or other events.

Code Example –

// App.js > > >
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const App = () => {
 // Declare a state variable 'count' and a function 'setCount' to update it
  const [count, setCount] = useState(0);

  // Function to handle button press and update state
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <View style={{ padding: 20 }}>
      <Text>Current Count: {count}</Text>
      <Button title="Increment" onPress={increment} />
    </View>
  );
};

export default App;

// App.js > > >

import React, { useState } from 'react';

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

const App = () => {

// Declare a state variable 'count' and a function 'setCount' to update it

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

// Function to handle button press and update state

const increment = () => {

setCount(count + 1);

};

return (

<Text>Current Count: {count}</Text>

</View>

);

};

export default App;

Key Points –

1. State Initialization: useState(0) initializes the state with a value of 0.
2. State Update: The setCount function updates the state, causing the component to re-render with the new state value.
3. Functional Components: useState allows you to use state in functional components, making them more versatile.

Conclusion:-

In this blog, we discuss how to effectively implement and use the State and props in React Native.

You can also check other blogs from here.

Thanks for reading this blog ❤️

Hope this blog helped you to better understand how to effectively implement and use the State and props in React Native.

Reference:-

https://reactnative.dev/docs/tutorial