How to assign object to a state in react native?

Question

I want to assign a JSON object to a state in react native.

this.state = {
  card: null
}

_getCardDetails() {
  getItem('userData').then(data => {
    this.setState({
      card: data.user.creditCard
    })
  })
}

render() {
  const { card } = this.state
  return (
    <Text>{card}</Text>
  )
}

i'm getting the JSON object from a axios call to my backend. But I can't assign that object to state in React Native.

Response from _getItem()

{
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjo4MzY5NDc5ODk5fSwiaWF0IjoxNTgwMzU1NjkyfQ._tYykbMtegpl58Poat0w2PsMUpnGFypqFd_7P2s6wQ8",
    "next": true,
    "user": {
        "isProfileComplete": false,
        "createdAt": "2020-01-28T11:42:53.413Z",
        "_id": "5e302aa091741b14c0ef18bc",
        "phone": 8369479899,
        "creditCard": {
            "createdAt": "2020-01-28T11:42:53.440Z",
            "creditCardExpiry": "2021-01-28T11:42:53.440Z",
            "_id": "5e302aa091741b14c0ef18bb",
            "creditCardNo": 512723298971919,
            "creditCardCVV": 381,
            "__v": 0
        },
        "__v": 0
    }
}

Your code looks correct, although incomplete. Please provide the data returned from getItem, and the rest of the component. — FMCorz
– FMCorz, Commented Jan 30, 2020 at 4:45
sorry my bad but just card is also not working, I'm getting null only — devbeans
– devbeans, Commented Jan 30, 2020 at 5:04

Gaurav Roy · Accepted Answer · 2020-01-30 05:42:49Z

1

Try this,

 this.state = {
      cardDetails: null,
    }


    _getCardDetails() {
      getItem('userData').then(data => {
        this.setState({
          cardDetails: data.user.creditCard
        })
      })
    }

    render() {
  const { cardDetails } = this.state
  return (
    <Text>{cardDetails.creditCardNo}</Text>
  )
}

hope this helps.

answered Jan 30, 2020 at 5:42

Gaurav Roy

12.4k3 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jai Over a year ago

So, by changing the variable name would do the trick? Can you explain why it should work?

Gaurav Roy Over a year ago

you are assigning object to state called cardDetails, but when extracting in text it doesnt take object, there you render card.creditcardnumber thats it

devbeans · Accepted Answer · 2020-01-30 06:00:36Z

0

Thanks guys, but I found a solution, it is assigning the object but I've to re-render the DOM or page whatever.

So this line helped me {card && this.state.card.creditCardNo}

i'm checking if there's anything in card state

answered Jan 30, 2020 at 6:00

devbeans

992 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to assign object to a state in react native?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related