title: React-Native - Cannot read property "cloneWithRowsAndSections" of undefined
body: <p>I'm doing a simple <code>ListView</code> with section headers a la this tutorial:</p>
  
  <p><a href="https://medium.com/@darylrowland/reactnative-listview-with-section-headers-99a6714282c3#.627c88ikm" rel="nofollow noreferrer">https://medium.com/@darylrowland/reactnative-listview-with-section-headers-99a6714282c3#.627c88ikm</a></p>
  
  <p>and I'm stuck for days on the part when the <code>ListView</code> uses its <code>datasource</code>.</p>
  
  <p>The class's <code>constructor</code> and the json object which is the source for the data: </p>
  
  <pre><code>    export class ProductListScreen extends Component {
    constructor(props) {
      super(props)
  
  var ds = new ListView.DataSource({
  
    rowHasChanged: (r1, r2) =&gt; r1 !== r2,
    sectionHeaderHasChanged: (s1, s2) =&gt; s1 !== s2
  })
      this.state = {
        location: {
            products: [
              {
                name: "Paprika baburaw",
                class: "3",
                price: "20",
                measure_unit: "7",
              },
              {
                name: "Paprika babura",
                class: "3",
                price: "20",
                measure_unit: "7",
              },
              {
                name: "Paprika  2",
                class: "3",
                price: "20",
                measure_unit: "7",
              },
              {
                name: "meso 2",
                class: "1",
                price: "20",
                measure_unit: "7",
              },
              {
                name: "meso 2",
                class: "1",
                price: "20",
                measure_unit: "7",
              },
              {
                name: "sir",
                class: "4",
                price: "20",
                measure_unit: "7",
              },
            ],
            vendor: {
                  name: "OPG xy",
                  adress: "Mije Stuparica 4",
                  e_mail: "wololo@gmail.com",
                  telephone: "0922423425",
            }
          },
        }
  
    }
  </code></pre>
  
  <p>My <code>ListView</code> inside the render is defined like this (takes <code>sortProducts()</code> as <code>datasource</code>):</p>
  
  <pre><code>          &lt;ListView
        dataSource={this.sortProducts()}
        renderRow={this.renderRow}
        renderSectionHeader={this.renderSectionHeader}
        renderSeparator={(sectionID, rowID) =&gt; &lt;View key={rowID}/&gt;}/&gt;
  </code></pre>
  
  <p>And the render methods fo the rows and sections are also functional.</p>
  
  <p>The function:</p>
  
  <pre><code>  sortProducts() {
      var ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) =&gt; r1 !== r2,
        sectionHeaderHasChanged: (s1, s2) =&gt; s1 !== s2
      })
      var productClassMap = {}
        this.state.location.products.forEach( function (productItem) {
          if(!productClassMap[productItem.class]) {
            productClassMap[productItem.class] = []
          }
        productClassMap[productItem.class].push(productItem)
      })
    this.setState({
      dataSource: this.state.ds.cloneWithRowsAndSections(productClassMap)
    })
    return productClassMap
    }
  </code></pre>
  
  <p>So the function tumbles the object and makes the <code>class</code> element of the <code>product</code>  the object's key which should serve as <code>SectionHeader</code> (1, 3 and 4 in this object).</p>
  
  <p>The problem lies when i try to set the state at the end of a function, and gives the error in this question's title. </p>
  
  <pre><code>        dataSource: this.state.ds.cloneWithRowsAndSections(productClassMap)
  </code></pre>
  
  <p>I'm guessing the error doesn't have much in common with the rest of the <code>ListView</code>, but I've put everything here so the context is clear.</p>
  
  <p>What am I doing wrong? I'm banging my head for days.. Any pointers and suggestions are most appreciated.</p>