I noticed when I would try to type anything in the text input field it would automatically delete it. I have narrowed down to the problem being the value field and commenting it out allows me to input text but I am not sure what could be the issue.
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
export default function App() {
const [enteredGoal, setEnteredGoal] = useState('');
const goalInputHandler = (enteredText) => {
setEnteredGoal(enteredGoal);
};
const addGoalHandler = () => {
console.log(enteredGoal);
};
return (
<View style={styles.screen}>
<View style={styles.inputContainer}>
<TextInput
placeholder="Course Goal"
style={styles.input}
onChangeText={goalInputHandler}
value={enteredGoal}
/>
<Button title='Add' onPress={addGoalHandler} />
</View>
<View />
</View>
);
}
The argument in goalInputHandler()
, enteredText
does not match the parameter in setEnteredGoal()
, enteredGoal
.
Correct code:
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
export default function App() {
const [enteredGoal, setEnteredGoal] = useState('');
const goalInputHandler = (enteredText) => (
setEnteredGoal(enteredText);
);
const addGoalHandler = () => (
console.log(enteredGoal);
);
return (
<View style={styles.screen}>
<View style={styles.inputContainer}>
<TextInput
placeholder="Course Goal"
style={styles.input}
onChangeText={goalInputHandler}
value={enteredGoal}
/>
<Button title='Add' onPress={addGoalHandler} />
</View>
<View />
</View>
);
}