React Native--Functional component--useState not working-CodePudding

My code is :

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { StyleSheet, Text, View, Button, TextInput } from "react-native";
export default function App() {
  const [entGoal, setEntGoal] = useState("");
  const textHandler = (entText) => {
    setEntGoal(entText);
  };
  const addHandler = () => {
    console.log(entGoal);
  };
  return (
    <View style={{ margin: 12, padding: 50 }}>
      <View>
        <Text>Goals List!</Text>
        <TextInput
          placeholder="Enter Goal"
          style={{ borderBottomWidth: 1, borderColor: "black" }}
          value={entGoal}
          onChange={textHandler}
        />
        <Button title="Add ( )" onPress={addHandler} />
      </View>
    </View>`enter code here`
  );
}

I am trying to do a simple code for asking to enter some goal and to print the text in console as output. But am not getting output in console. Some long synthetic errors are popped up. Please help!

CodePudding user response：

Please go through the TextInput guide, and replace your onChange prop with onChangeText. Like:

<TextInput
    placeholder="Enter Goal"
    style={{ borderBottomWidth: 1, borderColor: "black" }}
    value={entGoal}
    onChangeText={textHandler}
/>

Hope this works for you.