Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

42
Views
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

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

enter image description here

7 months ago · Juan Pablo Isaza
3 answers
Answer question

0

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'
7 months ago · Juan Pablo Isaza Report

0

You should capitalize your component's name. For example: <Header />.

7 months ago · Juan Pablo Isaza Report

0

You should Capitalize your component's name. for example header will be : <Header /> and footer will be <Footer />

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.