title: ReactJS: TypeError: this.state.data.map is not a function
body: <p>-Can someone please help me with this. I am getting an error described in the title of this question. I want to put JSON data inside react-grid-layout component. This library can be found on (<a href="https://github.com/STRML/react-grid-layout" rel="nofollow noreferrer">https://github.com/STRML/react-grid-layout</a>)</p>
  
  <pre><code>import React, {Component} from 'react';
  import ReactDOM from 'react-dom';
  import Employee from './Employee'; 
  import "./react-grid-layout/css/styles.css";
  import "./react-resizable/css/styles.css"
  
  
  var ReactGridLayout = require('react-grid-layout');
  
  var data = [];
  
  class MyFirstGrid extends React.Component {
      constructor() {
          super();
          this.state = {
              data: []
          };
      }
  
      componentDidMount(){
          fetch("http://localhost:8080/TrainingWebMvcSpring2/roottypes/listAll.do")
              .then( (response) =&gt; {
                  return response.json() })
                      .then( (json) =&gt; {
                          this.setState({data: json});
                      });
      }
  
  
      render () {
          console.log(data);
  
          return (
              &lt;ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}&gt;
                  {this.state.data.map(function(item, key){
                      return(
                          &lt;div&gt;
                          &lt;div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}&gt; {item}&lt;/div&gt;
                          &lt;div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}&gt; {item} &lt;/div&gt;
                          &lt;div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}&gt; {item} &lt;/div&gt;
                          &lt;/div&gt;
                      )
                  })}
              &lt;/ReactGridLayout&gt;
          )
      }
  }
  
  export default MyFirstGrid;
  </code></pre>