title: How to mapStateToProps only after the component receives data from Firebase
body: <p>In the application I'm trying to render data, based on the route parameters.</p>
  
  <p>When I run the code, I receive an error screen because mapStateToProps hasn't received data from Firestore and the .find() function cannot run on 'undefined'.</p>
  
  <pre><code>const mapStateToProps = (state, ownProps) =&gt; {
    const id = ownProps.match.params.product_id;
  
    return {
      product: state.firestore.ordered.products.find(p =&gt; p.id === id)
    };
  };
  </code></pre>
  
  <p>I've tried using conditional rendering inside the component itself but the error is inside the mapStateToProps(). The data doesn't even get to the component because the script is stopped at the first attempt of mapping the state to its props.</p>
  
  <p>Here is my component without conditional rendering, for reference.</p>
  
  <pre><code>&lt;div className="product-detail-page top-padding container col-lg-10"&gt;
          &lt;div className="product-desc"&gt;
            &lt;div className="product-desc-image col-lg-5"&gt;
              &lt;img
                src={this.props.product.image}
                alt={this.props.product.name}
                className="col-12"
              /&gt;
            &lt;/div&gt;
            &lt;div className="product-desc-right col-lg-7"&gt;
              &lt;h2 className="product-desc-title"&gt;{this.props.product.name}&lt;/h2&gt;
              &lt;div className="product-desc-bottom-section"&gt;
                &lt;div className="product-desc-text"&gt;
                  &lt;p&gt;
                    In stock - Ships from Ireland. Sold and Shipped by{" "}
                    &lt;span className="comp-logo"&gt;
                      &lt;Link to="/"&gt;
                        comp&lt;span className="red-dot"&gt;.&lt;/span&gt;com
                      &lt;/Link&gt;
                    &lt;/span&gt;
                  &lt;/p&gt;
                  &lt;ul&gt;
                    &lt;li&gt;{this.randomDetails(1)}&lt;/li&gt;
                    &lt;li&gt;{this.randomDetails(2)}&lt;/li&gt;
                    &lt;li&gt;{this.randomDetails(3)}&lt;/li&gt;
                    &lt;li&gt;{this.randomDetails(4)}&lt;/li&gt;
                    &lt;li&gt;{this.randomDetails(5)}&lt;/li&gt;
                    &lt;li&gt;{this.randomDetails(6)}&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div className="star-rating"&gt;
                    &lt;img src={this.starRating(1)} alt="*" /&gt;
                    &lt;img src={this.starRating(2)} alt="*" /&gt;
                    &lt;img src={this.starRating(3)} alt="*" /&gt;
                    &lt;img src={this.starRating(4)} alt="*" /&gt;
                    &lt;img src={this.starRating(5)} alt="x" /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className="product-desc-checkout"&gt;
                  &lt;div className="product-desc-total"&gt;
                    &lt;h4&gt;€ {this.preTaxCalculator().toFixed(2)}&lt;/h4&gt;
                    &lt;p&gt;VAT - € {this.taxCalculator().toFixed(2)}&lt;/p&gt;
                    &lt;p&gt;Shipping: € {this.props.product.shipping}&lt;/p&gt;
                    &lt;h3&gt;{this.props.product.price}&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div className="product-desc-action-buttons"&gt;ADD TO CART&lt;/div&gt;
                  &lt;div className="product-desc-action-buttons"&gt;
                    ADD TO WISHLIST
                  &lt;/div&gt;
                  &lt;div className="product-desc-action-buttons"&gt;
                    SAVE FOR LATER
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="product-details"&gt;
            &lt;h2&gt;Learn more about the {this.props.product.name}&lt;/h2&gt;
            &lt;table&gt;
              &lt;tbody&gt;
                {this.renderKeys().map(key =&gt; (
                  &lt;tr key={key}&gt;
                    &lt;td&gt;{key}&lt;/td&gt;
                    &lt;td&gt;{this.props.product.details[key]}&lt;/td&gt;
                  &lt;/tr&gt;
                ))}
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>