JsonArray Listview with React Native?

Question

This may be dumb question am trying to fetch json array from server and set it in listview, Today only i started doing react js so bit confused how to do this am getting null is not an object(evaluating 'this.state.datasource') don't know where am making mistake let me post my code what i tried so far this is index.android code:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ListView,
  View
} from 'react-native';

export default class SecondProject extends Component {
      constructor(props) {
    super(props);
    this.dataSource = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2
  })
  }
  componentDidMount () {
   this.getContractList()
}

  render() {
    this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseJson)});
    return (
      <View style={{flex: 1, paddingTop: 22}}>
        <ListView
          dataSource={rows}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
    getContractList() {
      return fetch('url')
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({isLoading: false, jsonData: responseJson});
        ///  console.log(responseJson);
          return responseJson;
        })
        .catch((error) => {
         // console.error(error);
        });
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('SecondProject', () => SecondProject); 

and this is json response from server:

[
        {
        "HeaderText":"Contract Approval",
        "ApprovalType":"C",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Contract Specification Approval",
        "ApprovalType":"CS",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Spare Part Request Approval",
        "ApprovalType":"SPR",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Spare Part Non Return Approval",
        "ApprovalType":"SPNR",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Spare Purchase Request Approval",
        "ApprovalType":"SPRA",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        },
        {
        "HeaderText":"Spare Request Approval",
        "ApprovalType":"SSRA",
        "ApprovalCount":0,
        "SubText":"New / Change",
        "ApproverID":198
        }
]

how to deal with this can someone helpme out thanks in advance!!

Answer 1

Try something like this -

constructor(props) {
  super(props);

  this.state = {
    jsonData: null
  };

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

---

  render() {
    return (
      <View style={{flex: 1, paddingTop: 22}}>
        {this.state.jsonData &&
          <ListView
            dataSource={this.dataSource.cloneWithRows(this.state.jsonData)}
            renderRow={(rowData) => <Text>{rowData.title}</Text>}
          />}
      </View>
    );
  }

---

  getContractList() {
    var url = 'https://facebook.github.io/react-native/movies.json';
    fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
        this.setState({isLoading: false, jsonData: responseJson.movies});
      })
      .catch((error) => {
       //console.error(error);
      });
  }

Answer 2

I am not an expert on react native but I noticed that in your fetch('url')the URL isn't defined anywhere. I would suggest putting the URL of the Json there.