I have a LoginForm.js ponent

import { React, Component } from 'react';
import { Button, Card, CardSection } from './mon';

class LoginForm extends Component {
    render() {
        return (
            <Card>
                <CardSection />

                <CardSection />

                <CardSection>
                    <Button>
                        Login
                    </Button>
                </CardSection>


            </Card>
        );
    }

}

export default LoginForm;

I tried to integrate it into my App.js like this

import React, { Component } from 'react';
import { View } from 'react-native';
import firebase from 'firebase';

import { Header } from './ponents/mon';
import LoginForm from './ponents/LoginForm';


class App extends Component {


    ponentWillMount() {
        firebase.initializeApp({
            apiKey: '*********',
            authDomain: 'rn-auth-a3fb5.firebaseapp',
            databaseURL: '',
            projectId: 'rn-auth-a3fb5',
            storageBucket: 'rn-auth-a3fb5.appspot',
            messagingSenderId: '34567890'
        });
    }
    render() {
        return (
            <View>
                <Header headerText='Authentication' />
                <LoginForm />

            </View>

        );
    }
}
export default App;

I kept getting an error

TypeError: Cannot read property 'createElement' of undefined

This error is located at: in LoginForm (at App.js:26) in RCTView (at View.js:43) in App (at renderApplication.js:32) in RCTView (at View.js:43) in RCTView (at View.js:43) in AppContainer (at renderApplication.js:31)

Which I expect to get something like this

How would one go about debugging this further?

I have a LoginForm.js ponent

import { React, Component } from 'react';
import { Button, Card, CardSection } from './mon';

class LoginForm extends Component {
    render() {
        return (
            <Card>
                <CardSection />

                <CardSection />

                <CardSection>
                    <Button>
                        Login
                    </Button>
                </CardSection>


            </Card>
        );
    }

}

export default LoginForm;

I tried to integrate it into my App.js like this

import React, { Component } from 'react';
import { View } from 'react-native';
import firebase from 'firebase';

import { Header } from './ponents/mon';
import LoginForm from './ponents/LoginForm';


class App extends Component {


    ponentWillMount() {
        firebase.initializeApp({
            apiKey: '*********',
            authDomain: 'rn-auth-a3fb5.firebaseapp.',
            databaseURL: 'https://rn-auth-a3fb5.firebaseio.',
            projectId: 'rn-auth-a3fb5',
            storageBucket: 'rn-auth-a3fb5.appspot.',
            messagingSenderId: '34567890'
        });
    }
    render() {
        return (
            <View>
                <Header headerText='Authentication' />
                <LoginForm />

            </View>

        );
    }
}
export default App;

I kept getting an error

TypeError: Cannot read property 'createElement' of undefined

This error is located at: in LoginForm (at App.js:26) in RCTView (at View.js:43) in App (at renderApplication.js:32) in RCTView (at View.js:43) in RCTView (at View.js:43) in AppContainer (at renderApplication.js:31)

Which I expect to get something like this

How would one go about debugging this further?

• javascript
• reactjs
• react-native

1 Answer 1

Your React import in LoginForm.js is incorrect. React should be the default import.

import React, { Component } from 'react';