React native returning null for state

Question

I am trying to set the state of an item then use the new state as a prop which is passed to my component but it doesn't appear to be setting the state in time

constructor (props) {
    super(props)
    this.cartFirebase = firebaseApp.database().ref('carts')
    this.cartFirebase.child(DeviceInfo.getUniqueID() + '/items').push({
      item: this.props.data.name,
      qty: 1
    }).then((snap) => {
      this.state = {
        cartKey: snap.key
      }
    })
  }

Component

<AddToCartRow item={this.props.data.sizes} option='size' key={this.state.cartKey}/>

Dan · Accepted Answer · 2017-05-25 10:05:39Z

1

This is because at the time of rendering AddToCartRow, this.state.cartKey is null.

You're setting cartKey from within a Promise .then(..) which has not yet been fulfilled.

Your render() is actually calling before your constructor has populated this.state.cartKey.

You could write the following logic to only render the component when this.state.cartKey evaluates to true, and as we know null evaluates to false.

{this.state.cartKey && <AddToCartRow item={this.props.data.sizes} option='size' key={this.state.cartKey}/>}

answered May 25, 2017 at 10:05

Dan

8,9229 gold badges46 silver badges82 bronze badges

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

Collectives™ on Stack Overflow

React native returning null for state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related