How to pass json array to Listview In react Native - json

Question

He I am trying to implement Listview in React Native.I followed official docs but that to no success.Basically i get response from database about actor Names and their respective last name as follows
[
{"Name":"Amitabh","LastName":"Bachchan"},
{"Name":"Jaya","LastName":"Bhaduri Bachchan"},
{"Name":"Hrithik","LastName":"Roshan"},
{"Name":"Shahrukh","LastName":"Khan"},
{"Name":"Akshay","LastName":"Kumar"},
]
So I wanted to display these list using listview.
.
this is my code so far
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource:ds.cloneWithRows(['row 1', 'row 2']),
};
}
componentDidMount() {
//this is where i get data from previous screen as i mentioned in above format then i pass to state
this.setState({
dataSource: this.props.source,
})
}
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) =>
<View
style={styles.CanContainer}>
<View
style={styles.CanSubContainer}>
<View style={{flex: 1, alignItems: 'center'}}>
<Text style={styles.canTitles}>
{rowData.Name}
</Text>
</View>
<View style={{flex: 1, alignItems: 'center'}}>
<Text style={styles.canTitles}>
{rowData.LastName}
</Text>
</View>
</View>
</View>
}
/>
following is what i tried but i am getting error as

Answer 1

You can't assign your data directly to your listview datasource. Change your constructor and move your listview data source to global state. Also you can't assign JSON to listview datasource. You have to convert your JSON response to javascript object/array. You can use JSON.parse() function for this.
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
export default class Example extends Component {
constructor(props) {
super(props)
const myData = JSON.parse(props.source);
this.state = {
dataSource: ds.cloneWithRows(myData),
}
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) =>
<View
style={styles.CanContainer}>
<View
style={styles.CanSubContainer}>
<View style={{ flex: 1, alignItems: 'center' }}>
<Text style={styles.canTitles}>
{rowData.Name}
</Text>
</View>
<View style={{ flex: 1, alignItems: 'center' }}>
<Text style={styles.canTitles}>
{rowData.LastName}
</Text>
</View>
</View>
</View>
}
/>
);
}
}