State and Props in React Native

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;

Explain Code

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;

Explain Code

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

React Native

Aniket Raj

Aniket Raj, a Software Engineer, specializes in eCommerce mobile app development with expertise in Headless PWA. His innovative approach enhances app performance, delivering seamless and scalable solutions for modern eCommerce platforms.

11 Oct, 2024
Updated by - Aniket Raj
2 Sep, 2024
Created by - Aniket Raj

. . .

State and Props in React Native

Props:-

State:–

Conclusion:-

Reference:-

Leave a Comment Cancel Reply

Message Sent!