title: React.js error "this.state.product.response.map is not a function"
body: <p>I am a very newbie learning React.js and building a CRUD application using Visual Studio 2017 using MVC framework and Entity framework. I have found myself in a hole and stuck there for ages trying to retrieve data from a Product table in MSSQL through ajax calls to the Index method in the controller and then render it on the browser.  </p>
  
  <p>I have a Product Table and a Product class :</p>
  
  <pre><code>public partial class Product
  {
  
  
      public long Id { get; set; }
      public string ProductName { get; set; }
      public decimal Price { get; set; }
  
  }
  </code></pre>
  
  <p>Product Controller code is: </p>
  
  <pre><code>public class ProductsController : Controller
  
  {
    private SalesModel db = new SalesModel();
      // GET: Product
  
      public ActionResult Index()
      {
          return View(db.Products.ToList());
      }
  }
  </code></pre>
  
  <p>The Product.jsx is:</p>
  
  <pre><code>class ProductsList extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          product: {
              Id: 1,
              ProductName: "Microwave",
              Price: 120.90,
              response: []
          }
      }
  }
  
  componentDidMount() {
      axios.get("/Products/Index").then(response =&gt; {
          //console.log(response.data);  
          this.setState({
              product: Object.assign({}, this.state.product, { response: response.data })
          });
      });
  }
  
  render() {
  
      return (
          &lt;section&gt;
              &lt;h1&gt;Products List&lt;/h1&gt;
              &lt;div&gt;
                  &lt;table&gt;
                      &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Product Id&lt;/th&gt;&lt;th&gt;Product Name&lt;/th&gt; 
        &lt;th&gt;Product Price&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
                      &lt;tbody&gt;
                      {
                              this.state.product.response.map((item, key) =&gt; {
                                  return &lt;tr key={key}&gt;&lt;td&gt;{item.Id}&lt;/td&gt;&lt;td&gt; 
   {item.ProductName}&lt;/td&gt;&lt;td&gt;{item.Price}&lt;/td&gt;&lt;/tr&gt;;
                          })
                      }
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  
  
          &lt;/section&gt;
      )
  }
  </code></pre>
  
  <p>}</p>
  
  <pre><code>ReactDOM.render(&lt;ProductsList/&gt;,document.getElementById('myContainer'));
  </code></pre>
  
  <p>View is:</p>
  
  <pre><code>@using System.Web.Optimization
  @model IEnumerable&lt;MarsOnBoardTasks.ViewModels.Product&gt;
  
  @{
      ViewBag.Title = "Index";
  }
  &lt;html&gt;
  
  &lt;body&gt;
  &lt;h2&gt;Index&lt;/h2&gt;
  
  &lt;div id="myContainer" class="container"&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel- 
  core/5.8.23/browser.min.js"&gt;&lt;/script&gt;
  @* Jquery *@
  &lt;script src="https://code.jquery.com/jquery-2.2.0.min.js"&gt;&lt;/script&gt;
  @* React Library *@
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"&gt; 
  &lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react- 
  dom.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;
  
  @* ReactJS components *@
  @*&lt;script src="/Scripts/Product.jsx"&gt;&lt;/script&gt;*@
  @Scripts.Render("~/Scripts/React/Product.jsx")
  </code></pre>