Balasubramanian Balasubramanian - 1 year ago 41
iOS Question

Want to pass data to other component - ListView

I have added and imported the

sample data
. I want to list out data from this file in a
list view
and I'm passing the data to the Row Component for
RenderRow
. But getting error saying


Row(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.


import React, { Component } from 'react';
import { AppRegistry, View, ListView, Text, StyleSheet } from 'react-native';
import Row from './app/Row';
import data from './app/Data';

export default class ListViewDemo extends Component {
constructor(props) {
super(props);
const rowHasChanged = (r1, r2) => r1 !== r2
const ds = new ListView.DataSource({rowHasChanged});
this.state = {
dataSource: ds.cloneWithRows(data),
};
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(data) => <Row {...data} />} // Getting error here
/>
);
}
}
AppRegistry.registerComponent('DemoApp',() => ListViewDemo)


These my sample Data.js You can check the data here.

export default data = [
{...}, {...}
];


Row.js:

const Row = (props) => {
<View Style={styles.container}>
<Image source={{ uri: props.picture.large}} />
<Text >
{`${props.name.first} ${props.name.last}`}
</Text>
</View>
}


What would be the problem?

Answer Source

ES6 only returns when there is no explicit blocks:

const cb = (param) => param * 2;

You should explicitly return:

const Row = (props) => {
    return (
        <View Style={styles.container}>
            <Image source={{ uri: props.picture.large}} />
            <Text >
                {`${props.name.first} ${props.name.last}`}
            </Text>
        </View>
    );
}

Check this answer for further explanation.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download