title: Pass this.state not working ReactJS
body: <p>I have a table that gets data and dynamically displays it,</p>
  
  <p>Passing the "example" the table shows the data without problems,
  but when i try to pass </p>
  
  <p>&lt; ResponseTable data={this.state.sprints} , </p>
  
  <p>which is also contains the same structure as example ( Array of objects )
  it doesn't work</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var example = [
    {id: 1, sequence: 2, name: "Sprint 2018", state: "CLOSED", linkedPagesCount: 0},
    {id: 2, sequence: 2, name: "Sprint 2018-1", state: "OPEN", linkedPagesCount: 0}
  ];
  
  
  class Table extends React.Component{
  
    constructor(props){
      super(props);
      this.state = {}
    }
  
    fetchData() {
  fetch('http://localhost:8000/sprints/23')
    .then(function(response) {
      return response.json();
    })
    .then((myJson) =&gt; this.setState(myJson));
  }
  
    componentDidMount(){
      this.fetchData();
    }
  
    render(){
      console.log(this.state.sprints)
      console.log(example)
      return(
        &lt;div&gt;
          &lt;ResponseTable data={example} /&gt;
        &lt;/div&gt;
  
        );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>TypeError: Cannot read property '0' of undefined
  const props = Object.keys(data[0]);</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>columnsBuilder (data) {        
  &gt; 12 |     const props = Object.keys(data[0]);
    13 |     const columns = props.map( (item, index) =&gt; ({
    14 |         Header : item,
    15 |         accessor : item,</code></pre>
  </div>
  </div>
  </p>
  
  <p>ReactTable -></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default class ResponseTable extends React.Component {
   
      constructor() {
          super();
          this.columnsBuilder = this.columnsBuilder.bind(this);
      }
      columnsBuilder (data) {        
          const props = Object.keys(data[0]);
          const columns = props.map( (item, index) =&gt; ({
              Header : item,
              accessor : item,
              Cell : propss =&gt; propss.original[item].length === 0 ? '[]' : propss.original[item].toString(),
          }));
   
          const built = [
              {
                  Header : 'Response',
                  columns,
              },
          ];        
          return built;
      }
   
      render() {
          return (
              &lt;div&gt;
                  &lt;ReactTable
                      data={this.props.data}
                      columns={this.columnsBuilder(this.props.data)}
                      defaultPageSize={10}
                      className="-striped -highlight"
                  /&gt;
                  &lt;br /&gt;
              &lt;/div&gt;
          );
      }
  }</code></pre>
  </div>
  </div>
  </p>