Question 244508 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – why my Import functions are not working in react?

IN header.js

function header(){
    return(<div className="header"><header><h1>Header Content</h1></header></div>);
}
export default header;

IN footer.js

function footer(){
    return(<div className="footer"><footer>copyright 2022-23</footer></div>)
}
export default footer;

**IN App.js**

import React from 'react';
import header from './header';
import footer from './footer';

function App() {
  return (
    <div>
      <div><header/></div>
      <div><footer/></div>
    </div>
  );
}

export default App;

**why the import functions are not working?**

please correct my code I want to display the content of header.js and footer.js file in App.js but it is saying that the header and footer variables are unused in App.js file.

Tags:

3

Answers


  1. 0

    In JSX, components must start with a capital letter. When you are using the <header /> and <footer /> tags, they are being interpreted as those html elements. To fix it, rename your header and footer components to Header and Footer respectively.

    Login or Signup to reply.
  2. 0

    In React Component names should be written with Capital letters

    Header Component

    function Header(){
    return(
     <div className="header">
       <header>
         <h1>Header Content</h1>
       </header>
     </div>);
}
export default Header;

    Footer Component

    function Footer(){
    return(
      <div className="footer">
        <footer>copyright 2022-23</footer>
      </div>)
}
export default Footer;

    App Component

    import React from 'react';
import Header from './header';
import Footer from './footer';

function App() {
  return (
    <div>
      <div>
        <Header/>
      </div>
      <div>
        <Footer/>
      </div>
    </div>
  );
}

export default App;
    Login or Signup to reply.
  3. 0

    When you’re importing components, you need to capitalize the component names because React treats lowercase names as regular HTML elements.

    Rename your components :

    1. header.js >> Header.js
    2. footer.js >> Footer.js

    replace in your code :

    1. function header() >> function Header()
    2. function footer() >> function Footer()
    3. export default header >> export default Header;
    4. export default footer >> export default Footer;
    5. import header from ‘./header’ >> import Header from ‘./Header’
    6. import header from ‘./header’ >> import Footer from ‘./Footer’

    Finally, use Header and Footer in your app.js

    For more clear please have a look at HTML header and
    User Defined Components Must Be Capitalized

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search