Have been going through the documentation in https://facebook.github.io/react-native/docs/text.html . Its not clear how to link the reference between the two classes. I am trying to use the tag instead of and it this gives no reference found error.
Code :
import React, {Component} from 'react';
import {
Text,
View,
AppRegistry,
} from 'react-native';
class MyAppHeaderText extends Component {
render() {
return(
<MyAppHeader>
<Text style={{fontSize:20}}>
{this.props.children}
</Text>
</MyAppHeader>
)
}
}
class Test2 extends Component {
constructor(props){
super(props);
this.state = {
mainText: 'This is Bird',
subText : 'Not dino'
}
}
render() {
return(
<View>
{/* <Text>
{this.state.mainText}
{this.state.subText}
</Text> */}
<MyAppHeaderText>
<MyAppHeader>
{this.state.mainText}
{this.state.subText}
</MyAppHeader>
</MyAppHeaderText>
</View>
)
}
}
export default MyAppHeaderText;
AppRegistry.registerComponent('AwesomeProject',() => Test2);
Error :
ReferenceError: Can't find variable: MyAppHeader
This error is located at: in Test2 (at renderApplication.js:35) in RCTView (at View.js:113) in View (at AppContainer.js:102) in RCTView (at View.js:113) in View (at AppContainer.js:122) in AppContainer (at renderApplication.js:34)
As Derek mentioned,
you have never defined
MyAppHeader
, therefore you will get error.
You could delete all <MyAppHeader></MyAppHeader>
in your project, and it should work!
Otherwise you will need to defined MyAppHeader Component to make it works.
Clearly post for React Components Components and Props - React
Hope it will help.
That way you'il do what you want.
class Test2 extends Component {
constructor(props){
super(props);
this.state = {
mainText: 'This is Bird',
subText : 'Not dino'
}
}
render() {
return(
<View>
{/* <Text>
{this.state.mainText}
{this.state.subText}
</Text> */}
<MyAppHeaderText>
{this.state.mainText}
{this.state.subText}
</MyAppHeaderText>
</View>
)
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With