Skip to content
Advertisement

React 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

JavaScript

header.js

JavaScript

footer.js

JavaScript

The output is just this

enter image description here

Advertisement

Answer

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

JavaScript
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement