0

First when I import the function component and try using it in app.js file, then the component is not rendered. From the image, we can see that the header that we import is not being used App.js page

The code for the app.js file is here.

this is my code for the app.js file.

import "./App.css";
import header from "./myComponents/header";
function App() {
  return (
    <>
      <div>hello there</div>
      <header/>
    </>
  );
}

export default App;

and here is how it looks like when I run the server. only hello world is renderes

and this is my navigation bar code written in my header.js file.

import React from "react";

export default function header() {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <div className="container-fluid">
        <a className="navbar-brand" href="#">
          Todos list
        </a>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <a className="nav-link active" aria-current="page" href="#">
                Home
              </a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">
                About
              </a>
            </li>
          </ul>
          <form className="d-flex">
            <input
              className="form-control me-2"
              type="search"
              placeholder="Search"
              aria-label="Search"
            />
            <button className="btn btn-outline-success" type="submit">
              Search
            </button>
          </form>
        </div>
      </div>
    </nav>
  );
}
Hardik poudel
  • 61
  • 4
  • Use a capital letter for custom components. Use Header not header as that is already a standard HTML element. – evolutionxbox May 02 '21 at 03:15
  • Consider reading their documentation https://reactjs.org/docs/components-and-props.html it has useful “notes” which covers things like this. – evolutionxbox May 02 '21 at 03:18

2 Answers2

2

Component Name must start with a capital letter for your case it should be <Header/>

From the React official doc

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

ref

Alamin
  • 1,878
  • 1
  • 14
  • 34
0
In your header.js file add this line at the end and change your filename to Header.js(capital H):

export default Header like this :

    import React from "react";

    export default function Header() {
      return (
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div className="container-fluid">
            <a className="navbar-brand" href="#">
              Todos list
            </a>
            <button
              className="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                <li className="nav-item">
                  <a className="nav-link active" aria-current="page" href="#">
                    Home
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#">
                    About
                  </a>
                </li>
              </ul>
              <form className="d-flex">
                <input
                  className="form-control me-2"
                  type="search"
                  placeholder="Search"
                  aria-label="Search"
                />
                <button className="btn btn-outline-success" type="submit">
                  Search
                </button>
              </form>
            </div>
          </div>
        </nav>
      );
    }
    export default Header;

 and do these changes in your App.js :

    import "./App.css";  
    import Header from "./myComponents/Header";
    function App() {
      return (
        <>
          <div>hello there</div>
          <Header/>
        </>
      );
    }

    export default App;
AbdulBasit Hakimi
  • 46
  • 1
  • 5