undefined is not an object while evaluating props in react-native - react-native

Question

So i am passing some data to the page where i am navigating on click event as
render(){
const goToPageTwo = () => Actions.gray({text:"hello"});
return(
</View>
<Button onPress={goToPageTwo} title="Checkout" color="#841584"/>
</View>
);
}
Now in my other component if i access it as props
this.props.text
It gives an exception saying props is undefined
Please guide how to resolve
Thanks!
Update:
Code which is accessing this.props
import React, { Component } from 'react';
import { Actions } from 'react-native-router-flux'; // New code
import {
StyleSheet,
Text,
Alert,
View
} from 'react-native';
const GrayScreen = () => {
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={() => Actions.black()}>{this.props.text}</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'gray',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'blue',
},
});
export default GrayScreen;
code for Routing compponent
import React, { Component } from 'react';
import { Button } from 'react-native';
import Archives from './components/Archives.js';
import ScarletScreen from './components/ScarletScreen.js';
import GrayScreen from './components/GrayScreen.js';
import Zaika from './components/Zaika.js';
import {Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
import {
Alert,Platform,
StyleSheet,
Text,
View,TextInput,Keyboard
} from 'react-native';
import NavBar, { NavGroup, NavButton, NavButtonText, NavTitle } from 'react-native-nav';
import { Router, Scene } from 'react-native-router-flux';
import App1 from './App1.js';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component<{}> {
render() {
return (
<Router>
<Scene key="root">
<Scene
key="zaika"
component={Zaika}
title="Delhi zaika"
initial
/>
<Scene key="app1"
component={App1}
title="app1"
/>
<Scene key="scarlet"
component={ScarletScreen}
title="Scarlet"
/>
<Scene {...this.props}
key="gray"
component={GrayScreen}
title="Gray"
/>
</Scene>
</Router>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
head: { height: 40, backgroundColor: '#f1f8ff' },
text: { marginLeft: 5 },
row: { height: 30 }
});

Answer 1

You won't have instance property props with React Stateless Functional Component.
The props will pass in as first argument instead:
const GrayScreen = (props) => {
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={() => Actions.black()}>{props.text}</Text>
</View>
)
}