React Native – State & Props
In React Native (and React in general), state and props are essential concepts for managing and passing data within components. Let’s break down each concept with examples.
State
State is a built-in object that is used to hold data or information about the component. A component’s state can change over time, typically in response to user actions or other events. When the state changes, the component re-renders to reflect the new state.
Example Using State
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const StateExample = () => {
// Declare a state variable called "count" with an initial value of 0
const [count, setCount] = useState(0);
// Function to increment the count
const incrementCount = () => {
setCount(count + 1);
};
return (
<View style={styles.container}>
<Text style={styles.text}>Count: {count}</Text>
<Button title="Increment" onPress={incrementCount} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
marginBottom: 20,
},
});
export default StateExample;In this example:
- We use the
useStatehook to create a state variablecountand a functionsetCountto update it. - The
incrementCountfunction increments thecountby 1. - When the button is pressed, the
incrementCountfunction is called, updating the state and re-rendering the component with the new count.
Props
Props (short for “properties”) are read-only attributes used to pass data from a parent component to a child component. Props allow components to be reusable by accepting dynamic data from their parents.
Example Using Props
First, we’ll create a parent component that passes props to a child component.
Parent Component (App.js):
import React from 'react';
import { View, StyleSheet } from 'react-native';
import ChildComponent from './ChildComponent';
const App = () => {
return (
<View style={styles.container}>
<ChildComponent message="Hello from Parent!" />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;Child Component (ChildComponent.js):
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const ChildComponent = (props) => {
return (
<View style={styles.box}>
<Text style={styles.text}>{props.message}</Text>
</View>
);
};
const styles = StyleSheet.create({
box: {
padding: 20,
backgroundColor: 'lightgreen',
borderRadius: 10,
alignItems: 'center',
},
text: {
fontSize: 20,
},
});
export default ChildComponent;In this example:
- The
Appcomponent (parent) renders theChildComponentand passes amessageprop to it. - The
ChildComponentreceives themessageprop and displays it inside aTextcomponent.
Combining State and Props
You can also combine state and props to create dynamic applications where the parent component manages the state and passes it down as props to child components.
Example:
Parent Component (App.js):
import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import ChildComponent from './ChildComponent';
const App = () => {
const [message, setMessage] = useState('Hello from Parent!');
const changeMessage = () => {
setMessage('Message has been changed!');
};
return (
<View style={styles.container}>
<ChildComponent message={message} />
<Button title="Change Message" onPress={changeMessage} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;Child Component (ChildComponent.js):
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const ChildComponent = (props) => {
return (
<View style={styles.box}>
<Text style={styles.text}>{props.message}</Text>
</View>
);
};
const styles = StyleSheet.create({
box: {
padding: 20,
backgroundColor: 'lightgreen',
borderRadius: 10,
alignItems: 'center',
},
text: {
fontSize: 20,
},
});
export default ChildComponent;In this combined example:
- The
Appcomponent has a state variablemessagethat is passed as a prop to theChildComponent. - A button in the
Appcomponent changes themessagestate, which updates theChildComponentvia props, demonstrating how state and props can be used together to create interactive and dynamic components.