title: React setState update
body: <p>So I am trying to list items from API. I really don't get what is wrong with my code here. I keep getting error.</p>
  
  <p>The thing is state.product gets correctly updated with api data.</p>
  
  <p>here is the error I am getting:</p>
  
  <blockquote>
    <p>this.state.product.map is not a function</p>
  </blockquote>
  
  <p>Can someone please be kind enough to help me here </p>
  
  <pre><code>import React, { Component } from 'react';
  import { getTranslate, getActiveLanguage } from 'react-localize-redux';
  import { connect } from 'react-redux';
  
  // Api Services
  import Product from '../../api/product';
  
  class ListProducts extends Component {
      constructor() {
          super();
          this.state = {
              deleteProductModalIsOpen: false,
              products: []
          };
      }
  
      componentDidMount() {
          let __this = this;
  
          Product.getAll(function(res) {
  
              __this.setState({ products: res });
          });
       }
  
      render() {
          const products = this.state.products.map((item) =&gt; ([
              &lt;div className="photo-container" style={{ backgroundImage: 'url("/img/samples/photo.png")' }}&gt;&lt;/div&gt;,
              item.reference_provider,
              item.label,
              &lt;BarCode img="/img/samples/bar-code.png" code={item.code}/&gt;,
              &lt;Input type="select-table" placeholder={this.props.translate('generic.type')} options={[
                  { value: '1', label: &lt;div&gt;&lt;div className="dot danger"/&gt; &amp;nbsp; Rupture&lt;/div&gt; },
                  { value: '2', label: &lt;div&gt;&lt;div className="dot warning"/&gt; &amp;nbsp; À commander&lt;/div&gt; },
                  { value: '3', label: &lt;div&gt;&lt;div className="dot info"/&gt;&amp;nbsp; Pris en compte&lt;/div&gt; },
                  { value: '4', label: &lt;div&gt;&lt;div className="dot success"/&gt; &amp;nbsp; En stock&lt;/div&gt; }
              ]}/&gt;,
              item.rellacotionproducts.length,
              &lt;div className="action-buttons"&gt;
                  &lt;a href="/list-products-activity#AdjustStocksModal"&gt;
                      &lt;div className="tooltip"&gt;
                          &lt;Button type={"table-action"} action={"less-gray"}/&gt;
                          &lt;div className="tooltip-text"&gt;{this.props.translate('Button.less')}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
                  &lt;a href="/list-products-activity#AdjustStocksModal"&gt;
                      &lt;div className="tooltip"&gt;
                          &lt;Button type={"table-action"} action={"plus-gray"}/&gt;
                          &lt;div className="tooltip-text"&gt;{this.props.translate('Button.plus')}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
                  &lt;a href={"/edit-product/" + item.id }&gt;
                      &lt;div className="tooltip"&gt;
                          &lt;Button type={"table-action"} action={"edit"}/&gt;
                          &lt;div className="tooltip-text"&gt;{this.props.translate('Button.edit')}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
                  &lt;div className="tooltip"&gt;
                      &lt;Button onClicked={this.openDeleteProductModal.bind(this)} type={"table-action"} action={"delete"}/&gt;
                      &lt;div className="tooltip-text"&gt;{this.props.translate('Button.delete')}&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          ]));
  
  
          return (
              &lt;div className="list-products"&gt;
                  &lt;Page/&gt;
                  &lt;div className="page-container"&gt;
                      &lt;div className="page-header"&gt;
                          &lt;h1&gt;&lt;img src="/img/list-products-header-icon.png"/&gt; &amp;nbsp;{this.props.translate('ListProducts.title')}&lt;/h1&gt;
                          &lt;div className="action-buttons"&gt;
                              &lt;Input type="search" label={this.props.translate('generic.search')}/&gt;
                              &lt;Button type={"action"} action="export" label={this.props.translate('Button.export')}/&gt;
                              &lt;Button type={"action"} action="create" label={this.props.translate('Button.fast_create')}/&gt;
                              &lt;Button type={"action"} action="print" label={this.props.translate('Button.print')}/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="page-main"&gt;
                          &lt;Table
                              pagination={true}
                              rowsPerPage="8"
                              head={[
                                  &lt;div&gt;{this.props.translate('generic.photo')} &amp;nbsp; &lt;/div&gt;,
                                  &lt;Input type="search-th" label={this.props.translate('ListProducts.reference')}/&gt;,
                                  &lt;Input type="search-th" label={this.props.translate('generic.tag')}/&gt;,
                                  &lt;Input type="search-th" label={this.props.translate('ListProducts.barcode')}/&gt;,
                                  &lt;div&gt;{this.props.translate('generic.type')} &amp;nbsp;&lt;img src="/img/table-header-order-arrow.png"/&gt;&lt;/div&gt;,
                                  &lt;div&gt;{this.props.translate('ListProducts.quantity_stock')} &amp;nbsp;&lt;img src="/img/table-header-order-arrow.png"/&gt; &amp;nbsp; &amp;nbsp; &lt;/div&gt;,
                                  this.props.translate('ListProducts.action')
                              ]}
                              body={
                                  products
                              }/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  const mapStateToProps = state =&gt; ({
      translate: getTranslate(state.locale),
      currentLanguage: getActiveLanguage(state.locale).code
  });
  
  export default connect(mapStateToProps)(ListProducts);
  </code></pre>
  
  <p>Also this is the response from the API server:</p>
  
  <pre><code>"products": [
      {
          "id": 53,
          "productoreqpt": true,
          "reference_company": null,
          "label": null,
          "type": null,
          "description": null,
          "code": null,
          "code_gentype": null,
          "category": [],
          "tags": [],
          "size": null,
          "color": null,
          "reference_provider": null,
          "statut": null,
          "dimlenght": null,
          "dimwidth": null,
          "dimtall": null,
          "weight": null,
          "unit": null,
          "perishable_duration": null,
          "dangerous": null,
          "maker": null,
          "gps": null,
          "supplier": null,
          "variation": null,
          "variation_mother": null,
          "variation_carac": null,
          "internal_code": null,
          "archive": null,
          "created": "2018-03-02T16:18:20+0000",
          "modified": "2018-03-02T16:18:20+0000",
          "company_id": 0,
          "env_id": 0,
          "user_num_1": null,
          "user_num_2": null,
          "user_num_3": null,
          "user_num_4": null,
          "user_num_5": null,
          "user_date_1": null,
          "user_date_2": null,
          "user_date_3": null,
          "user_date_4": null,
          "user_date_5": null,
          "user_text_1": null,
          "user_text_2": null,
          "user_text_3": null,
          "user_text_4": null,
          "user_text_5": null,
          "user_boo_1": null,
          "user_boo_2": null,
          "user_boo_3": null,
          "user_boo_4": null,
          "user_boo_5": null
      }
  </code></pre>
  
  <p>Ok so quite update. products seems to be an array but it is immediately turnt to undefined, here is a console log <a href="https://i.stack.imgur.com/LrCZt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LrCZt.png" alt="enter image description here"></a></p>