title: ReactNative null is not an object (evaluating 'this.state.dataSource')
body: <p>I am running the following code in Android emulator but I am getting <strong>null is not an object (evaluating 'this.state.dataSource')</strong> error.
  Please, could you help me to see what I am doing wrong? For some reason the line <code>dataSource={this.state.dataSource}</code> is getting null.</p>
  
  <pre><code>import React, {
    Component
  } from 'react';
  import {
    AppRegistry,
    ActivityIndicator,
    ListView,
    Text,
    View,
    StyleSheet
  } from 'react-native';
  import Row from './Row';
  import Header from './Header';
  import SectionHeader from './SectionHeader';
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: 20,
    },
    separator: {
      flex: 1,
      height: StyleSheet.hairlineWidth,
      backgroundColor: '#8E8E8E',
    },
  });
  
  export default class NoTocarList extends Component {
    constructor(props) {
      super(props);
      const getSectionData = (dataBlob, sectionId) =&gt; dataBlob[sectionId];
      const getRowData = (dataBlob, sectionId, rowId) =&gt;
        dataBlob[`${rowId}`];
  
      fetch('http://xxxxx.mybluemix.net/get')
        .then((response) =&gt; response.json())
        .then((responseJson) =&gt; {
          const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) =&gt; r1 !== r2,
            sectionHeaderHasChanged: (s1, s2) =&gt; s1 !== s2,
            getSectionData,
            getRowData
          });
  
          const {
            dataBlob,
            sectionIds,
            rowIds
          } =
          this.formatData(responseJson);
  
          this.state = {
            dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIds,
              rowIds)
          }
        })
    }
  
  
    formatData(data) {
      const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
      const dataBlob = {};
      const sectionIds = [];
      const rowIds = [];
  
      for (let sectionId = 0; sectionId &lt; alphabet.length; sectionId++) {
        const currentChar = alphabet[sectionId];
        const users = data.filter((user) =&gt;
          user.calle.toUpperCase().indexOf(currentChar) === 0);
  
        if (users.length &gt; 0) {
          sectionIds.push(sectionId);
  
          dataBlob[sectionId] = {
            character: currentChar
          };
          rowIds.push([]);
  
          for (let i = 0; i &lt; users.length; i++) {
            const rowId = `${sectionId}:${i}`;
            rowIds[rowIds.length - 1].push(rowId);
            dataBlob[rowId] = users[i];
          }
        }
      }
      return {
        dataBlob,
        sectionIds,
        rowIds
      };
    }
  
    render() {
      return (
        &lt;View style={{flex: 1, paddingTop: 20}}&gt;
          &lt;ListView
            style={styles.container}
            dataSource={this.state.dataSource}
            renderRow={(rowData) =&gt; &lt;Row {...rowData} /&gt;}
            renderSeparator={(sectionId, rowId) =&gt; &lt;View key={rowId} /&gt;}
            style={styles.separator}
            renderHeader={() =&gt; &lt;Header /&gt;}
            renderSectionHeader={(sectionData) =&gt; &lt;SectionHeader {...sectionData} /&gt;}
          /&gt;
        &lt;/View&gt;
      );
  
    }
  
  }
  
  
  AppRegistry.registerComponent('NoTocar', () =&gt; NoTocarList);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/tTXcl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tTXcl.png" alt="Error Message"></a></p>