CODEWITHSUNDEEP
javascriptreactjs
Negative
Negative

Reputation: 21

import statement not working in JavaScript code

Hello I am a new programmer, recently I started coding in react but I have this problem with my JavaScript code. Import is not working.

import React from 'react';
import './App.css';
import { hello } from '/components/hello.js';

function App() {
  return (
    <div className="App">
      <header>
      <p>
        <hello></hello>
      </p>
      </header>
    </div>
  );
}

export default App;

This here is my app.js file

import React from 'react';

export default function hello(){
    return <h1>Hello user</h1>;
}

This here is my hello.js file(It is located inside my components folder) Can anyone tell me why import is not working??

Upvotes: 0

Views: 105

Answers (2)

Aib Syed
Aib Syed

Reputation: 3196

Change this:

    import React from 'react';

    export default function Hello(){
    return <h1>Hello user</h1>;
}

To this:

    import React from 'react';

    export function Hello(){
    return <h1>Hello user</h1>;
}

If you want to leave it as a default function then import it like this instead:

import Hello from '/components/Hello.js';

Also, it is best practice to capitalize component names. <Hello />

Upvotes: 2

Ale Plo
Ale Plo

Reputation: 819

Try using default import instead of name import because in your hello.js you are setting up for default. Also your path for hello.js is right? Try ./hello.js

Upvotes: 1

Related Questions