Skip to content

undefined is not an object (evaluating 'itemsRef.on') #34

@EthanDoan

Description

@EthanDoan

Hi,
I follow the guide but got that error. Please help.

import React, { Component } from 'react';
import {
    Text,
    View,
    ListView
} from 'react-native';
import * as firebase from 'firebase'
import { constantColor, styles } from './styles'
import ActionButton from './components/ActionButton'
import ListItem from './components/ListItem'
import StatusBar from './components/StatusBar'

// Initialize Firebase
const firebaseConfig = {
    apiKey: 'AIzaSyBfvVSh162xtnRiWELB9LWSUodd0-spvCU',
    authDomain: 'groceryandroid-df821.firebaseapp.com',
    databaseURL: 'https://groceryandroid-df821.firebaseio.com',
    storageBucket: ""
};
firebase.initializeApp(firebaseConfig);

export default class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 != row2
            })
        }
        this.itemsRef = this.getRef()
    }

    getRef() {
        const rootRef = firebase.database().ref()
        const itemsRef = rootRef.child('items')
        return itemsRef
    }

    componentDidMount() {
        this.listenForItems(this.state.itemsRef)
    }

    _renderItem = (item) => {
        return (
            <ListItem item={item} onpress={() => { }} />
        )
    }

    listenForItems(itemsRef) {
        itemsRef.on('value', (snap) => {
            // get children as an array
            var items = [];
            snap.forEach((child) => {
                items.push({
                    title: child.val().title,
                    _key: child.key
                });
            });
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(items)
            });
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar title="Grocery List" />
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this._renderItem}
                    style={styles.listview}
                />
                <ActionButton title="Add" onpress={() => { }} />
            </View>
        );
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions