ListView DataSource is not displaying data when put inside state

I am new to React Native. I have the following renderInitialView() in my code. My renderInitialView() function is displaying data in listview if I write this below statement in this renderInitialView function,

 this.dataSource = ds.cloneWithRows(this.props.services);

if I declare the same statemnet inside the state then my listview starts throwing an error, the error is undefined is not a function (evaluating '_this.state({dataSource: ds.cloneWithRows(_this.props.services})'), Below is my renderinitialView() function with state

renderInitialView() {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    });

    this.state({
       dataSource : ds.cloneWithRows(this.props.services)
 }

//);
   // this.dataSource = ds.cloneWithRows(this.props.services);

    if (this.props.detailView === true) {
      return (
        <ServiceDetail />
      );
    } else {
      return (
        <ListView 
          enableEmptySections={true}
          dataSource={this.dataSource}
          renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
          renderHeader={this.renderHeader}
          renderRow={(rowData) => 
            <ServiceItem services={rowData} />

          }
        />
      );
    }
  }



  render() {
    return (
      <View style={styles.container}>
        {this.renderInitialView()}
      </View>
    );
  }
}

If I remove the state and just write

this.dataSource = ds.cloneWithRows(this.props.services);

then my listview shows the data. I want to display my listview with datasource inside the state. I am not sure what am I doing wrong. Below is the code of my entire page. The code works if I remove

 this.state({
       dataSource : ds.cloneWithRows(this.props.services)
 }

and replace it with

this.dataSource = ds.cloneWithRows(this.props.services);

Below is the entire code on my page with constructor

 import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView } from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux'
import reducers from '../reducers/ServiceReducer';
import ServiceItem from './ServiceItem';
import Icon from 'react-native-vector-icons/EvilIcons';
import ServiceDetail from './ServiceDetail';

const styles = StyleSheet.create({


  separator: { 
        flex: 1, 
       height: StyleSheet.hairlineWidth, 
       backgroundColor: '#8E8E8E', 
       },

       text: {
        marginLeft: 12,
        fontSize: 16,
      },
      header_footer_style:{

        width: '100%', 
        height: 45, 
        backgroundColor: '#FF9800'

    },
    textStyle:{

      alignSelf:'center',
      color: '#fff', 
      fontSize: 18, 
      padding: 7

    }


});


const store = createStore(reducers);

class AutoCompActivity extends Component {

  constructor(props) {

    super(props);

    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    });

    this.state({
       dataSource : ds.cloneWithRows(this.props.services)

  }
)
  }

  renderHeader = () => {

    var header = (

    <View style={styles.header_footer_style}>

      <Text style={styles.textStyle}> Tap the service to find the Loaction </Text>

    </View>

    );

    return header;

  };

  renderInitialView() {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    });

    this.state({
       dataSource : ds.cloneWithRows(this.props.services)
 }

//);
   // this.dataSource = ds.cloneWithRows(this.props.services);

    if (this.props.detailView === true) {
      return (
        <ServiceDetail />
      );
    } else {
      return (
        <ListView 
          enableEmptySections={true}
          dataSource={this.dataSource}
          renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
          renderHeader={this.renderHeader}
          renderRow={(rowData) => 
            <ServiceItem services={rowData} />

          }
        />
      );
    }
  }



  render() {
    return (
      <View style={styles.container}>
        {this.renderInitialView()}
      </View>
    );
  }
}



const mapStateToProps = state => {
  return { 

    services: state.services,
    detailView: state.detailView,
  };
};
const ConnectedAutoCompActivity = connect(mapStateToProps)(AutoCompActivity);


const app1 = () => (
  <Provider store={store}>
    <ConnectedAutoCompActivity />
  </Provider>
)

export default app1;

Any help will be highly appreciated.

THIS might help you. You might need to initialize your data as empty [].

var DATA =[];

Do this line outside your class