0

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.

kobo
  • 31
  • 3

2 Answers2

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>
)
Live bug help - www.dialect.so
  • 1,416
  • 1
  • 2
  • 11
  • Thanks for the help, the only issue is that I don't have access to the workout object outside of the map I'm in here: {workouts && workouts.map((workout, key) => { //text input here }} – kobo Jul 21 '22 at 23:21
  • Oh, then you can just make `workout.name` the default value if the `workoutName` is null and set it to null where you have the `useState` call: `const [workoutName, setWorkoutName] = useState(null)` ... `{workoutName === null ? workout.name : workoutName }` – Live bug help - www.dialect.so Jul 21 '22 at 23:24
  • That makes sense and is almost working, but then how do I get each `workoutName` to be different when `workoutName` gets set. That's making every workout then get set to the same value? The `onChangeText={(workoutName) => setWorkoutName(workoutName)}` is doing this I believe. – kobo Jul 21 '22 at 23:41
  • So you could either use an object to map from workout IDs (or something similar) to the workout name, or you could render a custom component for each workout in your `workouts.map()` (instead of just a TextInput, you could have a component with its own workoutName state and everything) – Live bug help - www.dialect.so Jul 22 '22 at 02:17
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.

kobo
  • 31
  • 3