Error : Forgot to export your Listview item component

Question

This is the error i'm getting.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check your code at BookingPage.js:19.

I have a Listview and item component is imported properly. When i'm changing export of Listview item from

export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard); 

to

export {BookingCard}; 

it's working. but i want to use redux for Listview item component. how to export class correctly. This is my BookingCard (Listview item component)

    import React from 'react';
    import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
    import { connect } from 'react-redux';
    import {Icon, Button} from 'native-base';
    import {callCancel, setBookingstatus} from '../actions';

    class BookingCard extends React.Component {
      render() {
        return (
          <View style={styles.container}>
                .....
               ......
          </View>
        );
      }
    }

    export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);
    // export {BookingCard};

BookingPage( Component including Listview )

import React from 'react';
import {ListView, View} from 'react-native';
import { connect } from 'react-redux';
import {Spinner} from './common';
import {BookingCard} from './BookingCard';
import {fetchBooking} from '../actions';

class BookingPage extends React.Component {

    componentWillMount() {
        this.props.fetchBooking();
    }

    ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
    });

    renderRow(booking) {
        return <BookingCard booking={booking} />;
    }

    renderButton() {
        if (this.props.loading) {
            return <Spinner size="large" />;
        } 
            return (
                <ListView
                    dataSource={this.ds.cloneWithRows(this.props.bookings)}
                    enableEmptySections
                    renderRow={this.renderRow}
                />
            );
    }

    render() {
        console.log('onRender BookingPage');
        return (
            <View>
                {this.renderButton()}
            </View>
        );
    }
}

const mapStateToProps = ({ booking }) => {
    const { bookings, loading } = booking;
    return { bookings, loading };
};

export default connect(mapStateToProps, {fetchBooking})(BookingPage);

Answer 1

Since you're exporting your component default like this:

export default connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);

The line below fails because it expects a named export.

import {BookingCard} from './BookingCard';

You should either fix your import like this:

import BookingCard from './BookingCard';

or export it like

export const MyConnectedComponent = connect(mapStateToProps, {callCancel, setBookingstatus})(BookingCard);

You can find out more at MDN's website.