CODEWITHSUNDEEP
react-native
BoolinBov
BoolinBov

Reputation: 47

React Native - Having issues Importing a Component into a Screen. Error : undefined is not an object (evaluating '_react.React.Component')

Having issues accessing this custom component from the Screen Page. I'm sure the fix is straightforward

Component:

import React from 'react';
import { Text, View, Button } from 'react-native';

class Ohno extends React.Component {
    render(){
        return(
          <Text>Test</Text>
        )
    }
}
export default Ohno

Screen:

import{ React,  Component} from 'react'
import { View, Text} from 'react-native'
// import { Videoz } from '../Components/Video';
import { Ohno } from '../Components/Test';


class App2 extends Component {
    render()
    {
        return (
          <View>
              <Ohno />
          </View>
        );
    }
}

export default App2;

Looks super simple but not sure what is going on.

Upvotes: 0

Views: 316

Answers (1)

Akshay Shenoy
Akshay Shenoy

Reputation: 1248

Continuing the answer given by @Ugur Eren, there are 2 exports, Named export and Default export.

Named exports: You can have multiple named exports from one file, and the import must be like

// ex. importing a named export:
import { MyComponent } from "./MyComponent";

// ex. Import named component with a different name using "as"
import { MyComponent as MyNewComponent } from "./MyComponent"

// exports from ./MyComponent.js file
export const MyComponent = () => {}

Default exports: There can only be one default export from each file. You can name it anything while importing.

// import
import MyDefaultComponent from "./MyDefaultExport";

// export
const MyComponent = () => {}
export default MyComponent;

Upvotes: 2

Related Questions