Populating React-Native ListView from JSON Data - ios

Question

React-Native amateur here, I've written a php api to retrieve data from a MySQL server, and I need to put this into a ListView to display on an app.
The code for showing this is:
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
dataSource: ds.cloneWithRows(this.props.response)
};
}
renderRow(rowData) {
return (
<View style={styles.row}>
<Text>{response}</Text>
</View>
)
}
render() {
return {
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}/>
);
}
}
And the API json return is as follows:
[{"barcode":"50201600","name":"Cadbury's Creme
Egg","tescoPrice":"1","sainsburysPrice":"1","asdaPrice":"1"},
{"barcode":"5034660520191","name":"Cadburys Twirl 4
Pack","tescoPrice":"1","sainsburysPrice":"1","asdaPrice":"1"}]
The error I get is:Objects are not valid as a React child (found: object with keys {barcode, name, tescoPrice, sainsburysPrice, asdaPrice}). If you meant to render a collection of children, use an array instead. Check the render method of 'Text'
Any ideas?
Cheers

Answer 1

From the error i see, you need to change from:
renderRow(rowData) {
return (
<View style={styles.row}>
<Text>{response}</Text>
</View>
)
}
into something like:
renderRow(rowData) {
return (
<View style={styles.row}>
<Text>{rowData.name}</Text>
</View>
)
}