Situation: TextInput using onSubmitEditing, onChangeText

the value shows "undefined" from onChangeText function.

I tried to get answer by looking through other people problems like me, but couldn't get the right one.

I hope someone knows the solution.

Here is my code

export default function App() {
  const [working, setWorking] = useState(true);
  const [text, setText] = useState("");
  const [toDos, setTodos] = useState({});
  const travel = () => setWorking(false);
  const work = () => setWorking(true);

  const onChangeText = (payload) => setText(payload);
  const addToDos = () => {
    if(text === ""){
      return;
    }
    const newToDos = {...toDos, [Date.now()]: {text, 
work: working},};
    setTodos(newToDos);
    setText("");
    };

 return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <View style={styles.header}>
        <TouchableOpacity onPress={work}>
          <Text style={{...styles.btnText, color: working? "white" : theme.grey}}>Work</Text>
        </TouchableOpacity> 
        <TouchableOpacity onPress={travel}>
          <Text style={{...styles.btnText, color:!working ? "white" : theme.grey}}>Travel</Text>
        </TouchableOpacity>
      </View>
      <TextInput 
      returnKeyType="done" 
      onSubmitEditing={addToDos}
      onChange={({EventTarget: payload})=> onChangeText(payload)} 
      value={text}  
      placeholder={ working ? "Add a To Do" : "Your Destination"} style={styles.input}/>
      <ScrollView>
        {Object.keys(toDos).map((key) => (
          <View style={styles.toDo} key={key}>
            <Text style={styles.toDoText}>
              {toDos[key].text}
            </Text>
          </View>
        ))}
      </ScrollView>
      {/* <ScrollView>
        {toDos.map((key, index)=> (
          <View style={styles.toDo} key={key}>
            <Text style={styles.toDoText}>({toDos[index].text})</Text>
          </View>
        ))}
      </ScrollView> */}
    </View>
  );
}

i consoe.log -> newToDos and toDos and here what I got.

*newToDos

Array [
  Object {
    "text": undefined,
    "work": true,
  },
  Object {
    "text": undefined,
    "work": true,
  },
  Object {
    "text": undefined,
    "work": true,
  },
]

*toDos

Object {
  "1664754701815": Object {
    "text": undefined,
    "work": true,
  },
  "1664754727073": Object {
    "text": undefined,
    "work": true,
  },
}

Expectation: to get "text" value and show it on screen.

**Maybe some of you may wonder why i put

onChange={({EventTarget: payload})=> onChangeText(payload)} 

inside of TextInput is because I got SyntheticEvent message and couldn't get value. “Warning: This synthetic event is reused for performance reasons” (SyntheticEvent-> Other solutions "payload.persist();"or "payload.stopPropagation(); " didn't work properly.)

That'll be great if you know the answer.

CodePudding user response：

It appears for your use case it would be more straight forward to use onChangeText instead of onChange. With onChangeText the output value is the text.

For e.g.:

...
<TextInput 
  returnKeyType="done" 
  onSubmitEditing={addToDos}
  onChangeText={(text) => onChangeText(text)} 
  value={text}  
  placeholder={ working ? "Add a To Do" : "Your Destination"} style={styles.input}
/>
...

CodePudding user response：

That is because the payload is an event and you are trying to set setText to the event rather than the actual value, you can get the value of a text event using event.target.value. To resolve this change the onChangeText function to this:

const onChangeText = (event) => {
const value = event.target.value;
setText(value)
};