Want to pass data to other component - ListView

Question

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?

You need to post what your `Row` component looks like and examples of what your actual `data` looks like. Otherwise, it could be anything. — Michael Cheng, Jul 26 '17 at 12:32

Waldson Patricio · Accepted Answer · 2017-07-26T13:01:21.907

3

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.

edited Jul 26 '17 at 13:01

answered Jul 26 '17 at 12:44

Waldson Patricio

1,489
13
17

Thanx mate. Its worked! And thanks for the resource too. – Balasubramanian Jul 26 '17 at 13:18

score 0 · Answer 2 · answered Jul 26 '17 at 12:38

0

Change this Line to

renderRow={(data) => <Row {...data} />}

To This

 renderRow={(data) =><Row {...this.props} />}

This may help you to get props in the row Component

answered Jul 26 '17 at 12:38

HpDev

2,789
1
15
20

Want to pass data to other component - ListView

2 Answers2