clonewithrows array issue in react-native

Question

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;

agenthunt · Accepted Answer · 2016-04-26 20:10:28Z

1

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>}
/>

answered Apr 26, 2016 at 20:10

agenthunt

8,6983 gold badges32 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

clonewithrows array issue in react-native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related