CloneWithRows with Json Objects

Question

Error : Error: Objects are not valid as a React child found: object with keys {id,image}

How do i properly render data id and image into listview?

     constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
          dataSource: ds.cloneWithRows([
         'NA', 'NA', 'NA', 'NA'
          ]),
            paused: true,
        }
    }

    componentWillMount(){
      this._loadGroups();
    }

    loadGroups(){
       const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
       fetch(`http://www.link.com/api/v1/list`)
       .then(response => response.json())
       .then(dataSource => this.setState({ dataSource:ds.cloneWithRows(dataSource), paused: true }))
       .catch(err => console.log(err))
       .done();
     }


     <ListView
         dataSource={this.state.dataSource}
         renderRow={this._renderRow}
      />

Json Data format as follows

{
    "error": "0",
    "data": [{
        "id": 54,
        "image": "url.jpg",

    }]
}

Answer 1

This is how I will do it.

var DATA =[];
var REQUEST_URL = 'http://www.link.com/api/v1/list';

class MyScreen extends React.Component {
  constructor(props) {
    super(props);
    var dataSource = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
      dataSource: dataSource.cloneWithRows(DATA),
    }
  }

  componentWillMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData[0].data),
        });
      })
      .done();
  }

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

  renderRow(data) {
    return (
        <View>
          <Image
              style={[{height:100,width:100}]}
              source={{uri: data.image}}/>
          <View>
            <Text>{data.id}</Text>
          </View>
        </View>
      )
  }
}

module.exports = MyScreen;