react-nativetextinput

In React-Native the TextInput field wont allow me to edit or type new text


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>
  );
}

Solution

  • 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>
      );
    }