Question 35451 in React native Question posted in
The official React Native documentation can be found here.

React Native TextInput value not updating

I have a TextInput field that when a user is editing, they have the option to cancel. The goal is to revert the TextInput value back to the original value before the user started editing, however, even though the previous value is stored and the screen is re-rendering, the text on the screen stays however the user left it. I’m assuming I’m just misunderstanding how the TextInput component works.

This is the input in question:

<TextInput
   style={styles.workoutheader}
   editable={editableWorkout == workout.id}
   onChangeText={(workoutName) => setWorkoutName(workoutName)}
>
{workout.name}
</TextInput>

and this is the cancel button:

<TouchableOpacity
 style={styles.workoutheadericon}
 onPress={() => {
    console.log('Reverting to: ' + prevWorkoutName, prevWorkoutType, prevWorkoutWeight, prevWorkoutReps);
    setWorkoutName(prevWorkoutName);
    setWorkoutType(prevWorkoutType);
    setWorkoutWeight(prevWorkoutWeight);
    setWorkoutReps(prevWorkoutReps);
    setEditableWorkout('');
    setIsEditing(!isEditing);
    setActionCounter(actionCounter + 1);
 }}
>

{workout.name} is coming from a firestore database, but I don’t think that’s related.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    SOLUTION

    I needed to target the workout being edited with editableWorkout == workout.id ? workoutName : workout.name} which let me differentiate between the workouts using Leon Si's answer.


  2. 0

    I don’t think the variable workout gets updated when you call setWorkoutName, try replacing {workout.name} with workoutName or whatever variable name you used where you declared your useState function that created the setWorkoutName setter function, e.g.

    const [workoutName, setWorkoutName] = useState(workout.name)

return (
<TextInput
   style={styles.workoutheader}
   editable={editableWorkout == workout.id}
   onChangeText={(workoutName) => setWorkoutName(workoutName)}
>
{/* should be `workoutName` here, not `workout.name` */ workoutName}
</TextInput>
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search