0
42
ViewsReact Js Components imported but not displaying
I have two components 'footer' and 'header' in the components directory. It imports properly but I am not able to display it.
App.js
import header from "./components/header";
import footer from "./components/footer";
function App() {
return (
<>
<header />
<main>
<h1>Welcome to Proshop</h1>
</main>
<footer />
</>
)
}
export default App;
header.js
import React from 'react'
function header() {
return (
<div>header</div>
)
}
export default header
footer.js
import React from 'react'
function footer() {
return (
<div>footer</div>
)
}
export default footer
The output is just this
3 answers
Answer question0
Your components must start with a capital letter, if not they will be treated like a regular html tags, see the docs on this
When an element type starts with a lowercase letter, it refers to a built-in component like
<div>or<span>and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like<Foo />compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
Bonus Point:
whatever your components file name is starting from the lower or uppercase letter you should always import it with an upper case.
let's say we have a file name header.js and a function with the name header.
it would help if you imported it like this
import Header from './header'
0
You should capitalize your component's name. For example: <Header />.
0
You should Capitalize your component's name. for example header will be : <Header /> and footer will be <Footer />