CODEWITHSUNDEEP
javascriptreactjsreact-native
JohnDotOwl
JohnDotOwl

Reputation: 3755

ListView.DataSource looping data for React Native

When I do a Console.log(this.state.dataSource) I get the image as below, I'm currently getting "Row goes here!"x 4 because the API return 4 results.

I tried to retrieve the user data like email but it wont "loop" and print accordingly.

I'm not exactly sure how this code works, comments would help abit.Please Advice

enter image description here

    var messagesTab = React.createClass({
  componentWillMount: function() {
    fetch('https://randomuser.me/api/?results=4')
      .then(res => res.json())
      .then(res => this.updateDataSource(res));
  },
  getInitialState: function() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
      })
    };
  },
  updateDataSource: function(data){
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(data)
    })
  },
  renderRow: function (){
    return (
      <View>
        <Text>Row goes here!</Text>
      </View>
    );
  },
  render: function(){
    console.log(this.state.dataSource);
    return (
      <View style={ styleseact.container }>
        <ListView dataSource={ this.state.dataSource } renderRow={ this.renderRow } />
      </View>
    );
  }
});

enter image description here

I got this when I did a console.log(data); on renderRow

Upvotes: 2

Views: 1496

Answers (1)

Richard de Wit
Richard de Wit

Reputation: 7460

You're overwriting your DataSource declaration. Split up the declaration and update.

Declare this before React.createClass:

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

Remove it from getInitialState:

getInitialState: function() {
  return {
    dataSource: ds.cloneWithRows([])
  };
},

And reference it in the update function:

updateDataSource: function(data){
  this.setState({
    dataSource: ds.cloneWithRows(data)
  })
},

Upvotes: 3

Related Questions