displaying input field after clicking button react-native - reactjs

Question

I am learning react-native and I wanted to do something simple where the user can enter some information like name or something and then when he/she clicks the button, it will display on the screen hello so and so. I have my onChangeText setting the state to what the user passes but it doesn't update. Also clicking the button doesn't show anything. I will paste my code down below. Any help or suggestions.
app.js
import { Button } from "react-native";
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
Alert,
TextInput
} from "react-native";
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"
});
type Props = {};
export default class App extends Component<Props> {
constructor() {
super();
this.state = {
text: "Hello "
};
this.handleChange = this.handleChange.bind(this);
}
handleChange = typedText => {
this.setState({
text: typedText
});
console.log(text);
};
render() {
return (
<View style={styles.container}>
<Text>{this.state.value}</Text>
<Button onPress={this.handleChange} title="Click Me " />
<TextInput
placeholder="Type your name here"
onChangeText={typedText => {
this.setState({
text: typedText
});
}}
/>
</View>
);
}
}
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
}
});

Answer 1

You are setting the state in handlechange (the onpress function) as well which is not required at all. There wont be an argument of text in your onPress you are resetting the text value in the state. And the text inside the handleChange will be undefined as you dont set it anywhere.
the code should be something like below.
export default class App extends Component {
constructor() {
super();
this.state = {
text: "Hello "
};
this.handleChange = this.handleChange.bind(this);
}
onPress = () => {
console.log("current ==> ", this.state);
alert(this.state.text);
};
handleChange = typedText => {
console.log("update => ", typedText);
this.setState(
{
text: typedText
}
);
};
render() {
return (
<View style={styles.container}>
<Text>{this.state.value}</Text>
<Button onPress={this.onPress} title="Click Me " />
<TextInput
placeholder="Type your name here"
onChangeText={this.handleChange}
/>
</View>
);
}
}

Answer 2

The issue was, on Press of button we are calling a function which expects a 'text' but in actual it is an event.
Check this codesandbox