CODEWITHSUNDEEP
react-native
Athira M V
Athira M V

Reputation: 13

React Native--Functional component--useState not working

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 goals and to print the text in the console as output. But I am not getting output in the console. Some long synthetic errors are popped up.

Upvotes: 0

Views: 126

Answers (1)

Shoaib Khan
Shoaib Khan

Reputation: 1210

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.

Upvotes: 3

Related Questions