CODEWITHSUNDEEP
listviewreact-native
Louis345
Louis345

Reputation: 740

react native dynamic list view Taylor Swift

I am trying to render a JSON of all my favorite Taylor Swift Albums. I thought it would be wise to use the list view instead of maping over the JSON.

I am having a difficult time trying to get my listview to render properly. As of now, I am getting an error "undefined is not an object(evaluating 'dataSource.rowIdentites'). 

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

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

class WordList extends Component{


   state = {albums: []} 



componentdidMount(){

   axios.get('https://rallycoding.herokuapp.com/api/music_albums')
           .then(response => this.setState({albums:response.data}));


        this.dataSource = ds.cloneWithRows(this.state.albums);
}



  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
      />
    );
  }
}


export default WordList;

I am able to get static lists to render perfectly, but when using a list from the Web is where I run into trouble. Please let me know where I am going wrong.

Thanks.

Upvotes: 1

Views: 3314

Answers (1)

alvaromb
alvaromb

Reputation: 4856

In your code you're trying to render from this.state.dataSource, however that property of your state is not defined in the constructor. Perform this changes to your code:

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

class WordList extends Component {

  constructor (props) {
    super(props)
    this.state = {
      albums: []
    }
    this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1!==r2});
  }

  componentdidMount(){
   axios.get('https://rallycoding.herokuapp.com/api/music_albums')
     .then(response => this.setState({albums:response.data}));
  }

  render() {
    return (
      <ListView
        dataSource={this.dataSource.cloneWithRows(this.state.albums)}
        renderRow={(rowData) => <Text>{rowData}</Text>}
      />
    );
  }
}

export default WordList;

Upvotes: 4

Related Questions