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?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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.

Want to pass data to other component - ListView

Sign up