CODEWITHSUNDEEP
reactjs
user11409100
user11409100

Reputation:

React unable to find component

I'm trying to create a React App.. largely my attempts so far are based on the default application from create-react-app. Here's my App.js:

import React from 'react';
import './App.css';
import './Components/MyComponent';

function App() {
  return (
    <div className="App">
      <MyComponent/>
    </div>
  );
}

export default App;

MyComponent is defined here:

import React from 'react';
import img from './Assets/img.png';
import imgComponent from './MyImage';

class MyComponent extends React.Component {
    render() {
      return
        <div>
            <imgComponent imageProp={img} />

        </div>
    }
}

export default MyComponent;

When I run this, I get the error:

./src/App.js
  Line 8:  'MyComponent' is not defined  react/jsx-no-undef

Please could someone tell me why I'm getting this error? I was under the impression that a combination of the import in App.js and the export default in MyComponent was all that was needed to use the component.

Upvotes: 0

Views: 1725

Answers (2)

Tamas Szoke
Tamas Szoke

Reputation: 5542

In the App.js you added MyComponent to the render method, but MyComponent is not defined in your code (as the error message says).

Just change your third import:

import './Components/MyComponent';

To:

import MyComponent from './Components/MyComponent';

So you got the component you are using in your render function.

I hope it helps!

Upvotes: 1

Shan
Shan

Reputation: 619

When we are doing export default Mycomponent, we are exposing the Mycomponent module to other modules. But we require a local name to access the contents. For a default export, it doesn't have to be the same as export. A simple import statement should look like import name from 'module'. In your case, it will be

import MyComponent from './Components/MyComponent'.

Upvotes: 0

Related Questions