title: Why is child component not receiving updated value from parent in React Native?
body: <p>When an arrow is clicked the Cart Item View needs to expand that particular view and collapse any others currently expanded.  The item id of that product is passed to the parent component to update which view is to be expanded (active).  Although, the id is being passed and set on the expandedItem property in the reducer this does not get updated to the child component (even though it's being passed as prop on the child component).  When the child component is re-evaluated at the end the expandedViewItem is still 0, which is it's default value.  Does anyone know how to get the child component to receive the updated expandedItem value?  Why is it still 0??</p>
  
  <p>PLEASE watch the video I made debugging this issue:  <a href="https://youtu.be/qEgxqAyWDpY" rel="noreferrer">https://youtu.be/qEgxqAyWDpY</a></p>
  
  <p>Here is where the value is evaluated in the <strong>child component</strong>:</p>
  
  <pre><code>render () {
  
  const isExpanded = product.id === this.props.expandedViewId;
  </code></pre>
  
  <p>Here is the entire child component class:</p>
  
  <pre><code>export default class CartProductItem extends Component {
      constructor(props) {
          super(props);
          this.state = {showCounter: false};
      }
  
      expandCartProductItem(id) {
          this.props.onExpandClick(id); 
          this.setState(this.state);
      }
  
      updateDisplay = (nextProps) =&gt; {
          // Null check is needed here as 0 is a valid value
          if (nextProps.activeIndex !== null &amp;&amp; nextProps.activeIndex === this.props.index) {
              this.setState({
                  showCounter: !this.state.showCounter
              });
          } else if (nextProps.activeIndex !== null &amp;&amp; nextProps.activeIndex !== this.props.index) {
              this.setState({
                  showCounter: false
              });
          }
      }
  
      componentWillReceiveProps(nextProps) {
          console.log('nextProps: ', nextProps)
      }
  
      render() {
          const serverUrl = getServerAddress();
          const {product} = this.props;
          const price = product.iogmodPrice ? product.iogmodPrice : product.price;
  
          const isExpanded = product.id === this.props.expandedViewId;
  
          const imageSrc = product.imageName
              ? 'https://b2b.martinsmart.com/productimages/'+ product.imageName.replace("Original", "Thumbnail")
              : serverUrl + '/b2b/resources/images/nophoto.gif';
  
          return (
              &lt;View style={styles.pContainer}&gt;
                  &lt;CartProduct
                      imageName={imageSrc}
                      name={product.description}
                      itemNum={product.id}
                      price={price}
                      pack={product.pack}
                      averageWeight={product.averageWeight}
                      cases={product.order_count}
                  /&gt;
  
                  &lt;TouchableOpacity style={styles.buttonContainer} onPress={() =&gt; this.expandCartProductItem(product.id)}&gt;
                      {isExpanded ? &lt;LineIcon name="arrow-up" style={styles.arrowIcon} /&gt; : &lt;LineIcon name="arrow-down" style={styles.arrowIcon} /&gt;}
                  &lt;/TouchableOpacity&gt;
  
                  {isExpanded &amp;&amp;
                      &lt;ExpandHeightView height={70}&gt;
                          &lt;View style={styles.counterContainerView}&gt;
                              &lt;QuantityCounter style={{width: '100%'}} product={product} /&gt;
                          &lt;/View&gt;
                      &lt;/ExpandHeightView&gt;
                  }
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>Here is the <strong>parent component</strong> function that passes the id to the action and the initial const declarations in the render:</p>
  
  <pre><code>expandAndCollapseItems = (id) =&gt; {
      this.props.dispatch(collapseCartItemViews(id));
  }
  
  render() {
      const {isLoading, displayDetails, sortCasesAsc, details, items, expandedItem} = this.props.orderInfo;
  </code></pre>
  
  <p>Here is the child component in the parent component where the <strong>expandedItem</strong> variable is being passed into it:</p>
  
  <pre><code>&lt;FlatList 
      data={items}
      keyExtractor={(item, index) =&gt; item.id.toString()}
      renderItem={({item}) =&gt; &lt;CartProductItem product={item} expandedViewId={expandedItem} onExpandClick={(id) =&gt; this.expandAndCollapseItems(id)} /&gt;}
  /&gt;
  </code></pre>
  
  <p>Finally, here is the reducer function updates the app state:</p>
  
  <pre><code>    case types.SET_EXPANDED_STATE:
          const id = action.id;
  
          return {
              ...state,
              expandedItem: id
          }
  </code></pre>