CODEWITHSUNDEEP
javascriptiosreactjsfirebasereact-native
user3802348
user3802348

Reputation: 2592

clonewithrows array issue in react-native

I am trying to populate a Listview in my react-native app using data from Firebase and am currently getting this error:

"Objects are not valid as a React child (found object with keys {title}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React addons. Check the render method of 'Text.'"

This is occurring on my call to clonewithrows. Currently my input to this function (after parsing response to Firebase) is: [ { title: 'New York' }, { title: 'Boston' } ]

Here is my relevant code; please let me know if you see anything that may be causing the problem. 

const huntsRef = new Firebase(`${ config.FIREBASE_ROOT }/hunts`)


class Home extends Component {
    constructor(props) {
        super(props);
        var conDataSource = new ListView.DataSource(
            {rowHasChanged: (r1, r2) => r1.guid != r2.guid});

        this.state = {
            dataSource: conDataSource
        };
    }

    listenForItems(huntsRef) {

        huntsRef.on('value', (snap) => {
            var hunts = [];
            snap.forEach((child) => {
                hunts.push({
                    title: child.val().title
                });
            });

            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(hunts)
            });
            console.log('datasource' + this.state.dataSource);
        });
    }

    componentDidMount() {
        this.listenForItems(huntsRef);
    }

    renderRow(rowData, sectionID, rowID) {
        console.log("ROWDATA" + rowData);
    }

    render() {

      return (
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      );
    }
}

module.exports = Home;

Upvotes: 0

Views: 1760

Answers (1)

agenthunt
agenthunt

Reputation: 8678

As the message says, rowData is javascript object and cannot be rendered. You can stringify your rowData. Ex: 

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData) => <Text>{JSON.stringify(rowData)}</Text>}
/>

Upvotes: 1

Related Questions