I want to fetch a list of items in my Firestore database into a component. The first component shows a list of items from Firestore in an array form when I console log "items", which is what I want.

class Landing extends React.Component {
    render() {
        const { items } = this.props;
        console.log(items)
        return (
            <div className="landing">
                <ItemList items={items} />
            </div>
        )
    }
};

const mapStateToProps = state => {
    return ({
        items: state.firestore.ordered.items,
    });
};

export default compose(
    connect(mapStateToProps), 
    firestoreConnect([
        { collection: 'items' }
    ])
)(Landing);

But, when mapStateToProps in another component, the console log doesn't show the array of items in my database. It, instead, shows a list of methods.

class BookItem extends React.Component {

    state = {
        startDate: new Date(),
        endDate: null,
        itemId: this.props.itemId,
    };  

    handleChangeStart = date => {
        this.setState({
            startDate: date
        });      
    }

    handleChangeEnd = date => {
        this.setState({
            endDate: date
        });
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.book(this.state)
    }

    render() {
        const { items } = this.props
        console.log(items)
        return (
            <div className="datePicker">
                <DatePicker
                    selected={this.state.startDate}
                    selectsStart
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                    onChange={this.handleChangeStart}
                />
                <button onClick={this.handleSubmit}>Book!</button>
            </div>
        );
    }
};

const mapStateToProps = state => {
    return {
        items: state.firestore.ordered.items
    }
}

const mapDispatchToProps = dispatch => {
    return {
        book: date => dispatch(book(date))
    }
}

export default compose(
    connect(mapStateToProps, mapDispatchToProps),
    firestoreConnect([
        { collection: 'items' }
    ]) 
)(BookItem);

Why does it work in the first component, but not the second?

Edit: My root reducer looks like this

const rootReducer = combineReducers({
    item: itemReducer,
    auth: authReducer,
    map: mapReducer,
    search: searchReducer,
    book: bookReducer,
    firestore: firestoreReducer,
    firebase: firebaseReducer
});

0 Answers