CODEWITHSUNDEEP
react-native
Faris Durrani
Faris Durrani

Reputation: 37

Console log state React native producing long output

How can I get the value of a state in React-Native? I tried to use console.log() but ended up with this very long output (which, truncated to the first 10000 characters, does not have the value I am looking for).

Code:

...
const [location, setLocation] = React.useState("")
...
            <TextInput
                style={styles.locationInput}
                placeholder="Location"
                value={location}
                onChangeText={setLocation}
            />
            <TouchableOpacity
                onPress={(location) => {
                    console.log(location);
                    const latLongJson = renderLocationToLatLong(location);
                }}
            >
...

Console:

Class {
  "_dispatchInstances": FiberNode {
    "tag": 5,
    "key": null,
    "type": "RCTView",
  },
  "_dispatchListeners": [Function onResponderRelease],
  "_targetInst": FiberNode {
    "tag": 5,
    "key": null,
    "type": "RCTView",
  },
  "bubbles": undefined,
  "cancelable": undefined,
  "currentTarget": ReactNativeFiberHostComponent {
    "_children": Array [
      ReactNativeFiberHostComponent {
        "_children": Array [
          13,
        ],
        "_internalFiberInstanceHandleDEV": FiberNode {
          "tag": 5,
          "key": null,
          "type": "RCTText",
        },
        "_nativeTag": 15,
        "viewConfig": Object {
          "directEventTypes": Object {
... (truncated)

Upvotes: 1

Views: 589

Answers (1)

carlosdafield
carlosdafield

Reputation: 1537

When you do this below, location is a reference to the component not your state.

onPress={(location)=>{console.log(location)}} // Same thing as below
onPress={(anyVariableNameHere)=>{console.log(anyVariableNameHere)}}

What you need to do is this below and not override your state variable name

onPress={() => {
     const latLongJson = renderLocationToLatLong(location);
}}

So that location is the useState variable that you made here

const [location, setLocation] = React.useState("")

And is changed by the textInput

Upvotes: 1

Related Questions