[FIXED] Why does it give a error of object are not valid as react child when I press touchable opacity

Issue

here is the main app.js code for the same:

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  TextInput,
  Platform,
  TouchableOpacity,
} from "react-native";
import tailwind from "tailwind-rn";

export default function App() {
  const [task, setTask] = useState("");
  const [description, setDescription] = useState("");
  const [priority, setPriority] = useState(0);
  const [showCreatedTask, setShowCreatedTask] = useState(false);
  return (
    <SafeAreaView
      style={[
        styles.AndroidSafeArea,
        tailwind("flex justify-center items-center bg-blue-800"),
      ]}
    >
      <View
        style={tailwind(
          "border border-gray-300 w-4/5 rounded-lg bg-blue-200 p-3"
        )}
      >
        <TextInput
          placeholder="Enter Task"
          style={tailwind("m-2 border p-1 bg-white")}
          onChangeText={(text) => setTask(text)}
        />
        <TextInput
          placeholder="Enter Description"
          style={tailwind("m-2 border p-1 bg-white")}
          onChangeText={(text) => setDescription(text)}
        />
        <TextInput
          placeholder="Enter Priority"
          style={tailwind("m-2 border p-1 bg-white")}
          onChange={(text) => setPriority(text)}
        />
        <View style={tailwind("")}>
          <TouchableOpacity
            style={tailwind(
              "bg-black p-2 m-2 rounded-full flex-col items-center"
            )}
            onPress={() => {
              setShowCreatedTask(true);
            }}
          >
            <Text style={tailwind("text-white")}>Create Task</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={tailwind(
              "bg-transparent p-2 m-2 rounded-full border flex-col items-center"
            )}
          >
            <Text style={tailwind("text-black")}>Clear fields</Text>
          </TouchableOpacity>
        </View>
      </View>
      {showCreatedTask && (
        <View>
          <Text>{task}</Text>
          <Text>{description}</Text>
          <Text>{priority}</Text>
        </View>
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 0.5,
    alignItems: "center",
    borderStyle: "solid",
    borderColor: "#000",
    padding: 10,
    height: "50%",
    justifyContent: "space-between",
  },
  AndroidSafeArea: {
    flex: 1,
    backgroundColor: "white",
    paddingTop: Platform.OS === "android" ? 25 : 0,
  },
});

this is what the UI looks like:

But the moment I tap Create task, it results in following error:

Warning: This synthetic event is reused for pe

rformance reasons. If you're seeing this, you're accessing the property `type` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/link/event-pooling for more information.
at node_modules\react-native\Libraries\LogBox\LogBox.js:174:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
- ... 29 more stack frames from framework internals

Error: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead.

This error is located at:
    in RCTText
    in TouchableText (created by Text)
    in Text (created by App)
    in RCTView (created by View)
    in View (created by App)
    in RCTView (created by View)
    in View
    in SafeAreaView (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer, js engine: hermes
at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
- ... 33 more stack frames from framework internals

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `type` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/link/event-pooling for more information.
at node_modules\react-native\Libraries\LogBox\LogBox.js:174:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
- ... 31 more stack frames from framework internals

Error: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, _dispatchListeners, _dispatchInstances, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, isDefaultPrevented, isPropagationStopped}). If you meant to render a collection of children, use an array instead.

This error is located at:
    in RCTText
    in TouchableText (created by Text)
    in Text (created by App)
    in RCTView (created by View)
    in View (created by App)
    in RCTView (created by View)
    in View
    in SafeAreaView (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer, js engine: hermes
at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
- ... 24 more stack frames from framework internals

I am a newbie to react-native, however I know some amount of Reactjs. So I tried applying all my React knowledge here, but this error is frustrating me as I am not able to figure out the problem. Any idea as to why this is happening and how it can be avoided?

Solution

The difference between onChange and onChangeText is that onChange receives an event object, and onChangeText receives only the text. So you are trying to setPriority(some event object) instead of setPriority(the priority that was typed in). Suggest using onChangeText for priority field too:

<TextInput
  placeholder="Enter Priority"
  style={tailwind("m-2 border p-1 bg-white")}
  onChangeText={(text) => setPriority(text)}
/>

Answered By - James

Answer Checked By - Candace Johnson (PHPFixing Volunteer)