React props is a function used in React JS. It stands for Properties and it is used to pass data from parent component to child component. A props consists of key value pair. React props is a component that allows an object to be passed through each component as a function of some initial value. This will make it easy to transfer props through multiple screens by having a parent pass it down to its children. To explain the case of React props in our example, we will write a simple React component using props.
// App.js
import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Display from './Display'
export default class App extends Component {
state = {
myState: 'Hello from Props State'
}
render() {
return (
<View style={styles.container}>
<Display newState = {this.state.myState}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F2F2F2',
alignItems: 'center',
justifyContent: 'center'
},
});
// Display.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
const Display = (props) => {
return (
<View>
<Text>
{props.newState}
</Text>
</View>
)
}
export default Display