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

React Native: <TextInput> not able to get values instead "undefined"

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.

Tags:

2

Answers


  1. 0

    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}
/>
...
    Login or Signup to reply.
  2. 0

    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)
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search