I am creating a app where the user can enter some text. I want the text the user entered into the Termial as a log.
My problem is that when I lunch the app the I cannot write anything into the text field.
App.js
import { useState } from 'react';
import { Button, StyleSheet, Text, View, TextInput } from 'react-native';
export default function App() {
const [enteredKeyword, setEnteredKeyword] = useState('') /* Bind TextInput to the variables */
const keywordInputHandler = (enteredText) => {
setEnteredKeyword(enteredText)
}
const addKeywordHandler = () => {
console.log(enteredKeyword)
}
return (
<View style={styles.container}>
{ /* Header */ }
<View style={styles.header}>
<TextInput placeholder="Enter text" style={styles.textInput} onChangedText={keywordInputHandler} value={enteredKeyword} />
<Button title="Add" onPress={addKeywordHandler} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
},
textInput: {
width: '80%',
borderColor: 'black',
borderWidth: 1,
padding: 10
}
});
CodePudding user response:
Please change onChangedText
to onChangeText
.
Also check out the guide of TextInput: https://reactnative.dev/docs/textinput
CodePudding user response:
onChangeText={(text)=> keywordInputHandler(text)}