I’m trying to display the state of child component in parent component, but somehow the text “abcde” still not show, here is the sample code
import React from 'react';
import {SafeAreaView, StyleSheet, Text} from 'react-native';
import {TouchableOpacity} from 'react-native-ui-lib';
class ChidComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
text: '',
};
}
render() {
return (
<SafeAreaView>
<TouchableOpacity
onPress={() => {
this.props.getText(this.state.text);
}}>
<Text>Get Text</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
this.setState({text: 'abcde'});
}}>
<Text>set ramdom text</Text>
</TouchableOpacity>
</SafeAreaView>
);
}
}
const style = StyleSheet.create({
text: {
fontWeight: 'bold',
fontSize: 40,
},
});
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false,
text: '',
};
}
getTextFromChild(value) {
this.setState({text: value});
}
render() {
return (
<SafeAreaView>
<Text>{this.state.text}</Text>
<ChidComponent
getText={this.getTextFromChild.bind(this)}
show={this.state.show}
press={() => this.setState({show: !this.state.show})}
textStyle={style.text}
/>
</SafeAreaView>
);
}
}
export default ParentComponent;
But somehow the screen still empty, the ‘abcde’ still not show, come from functional component so i don’t know what going on, please help, thank you a lots
