I am getting "'navBar' is defined but never used no-unused-vars" warning .How to-CodePudding

import './App.css';
import Search from './components/HomePage/SearchBar';
import navBar from './components/common/Header.js';
import footer from './components/common/Footer.js';

function App() {
  return (
    <div>
      <navBar />
      <h1>headd</h1> 
      <footer />
    </div>
    
  )
}

export default App;

This is my App.js the element is visible on the page, But not the navBar and footer.

Here's the Header.js file which exports navBar

export function navBar(){
    return(
        <div>
            <div>
                <ul className="navbar"> 
                    <li><h3>FindTheFlat</h3></li>
                    <li><a href="default.asp">LOGIN/SIGN-UP</a></li>
        
                </ul>
        
            </div>

        </div>

    )

}

The navBar is getting exported but isn't being used even after calling Need help on this.

CodePudding user response：

Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a component and requires Welcome to be in scope.

See more here: https://reactjs.org/docs/components-and-props.html

So, React not use your user-defined component (<navBar />, <footer />). It uses instead DOM tags

CodePudding user response：

I believe the reason is that you called your component with a lowercase name.

navBar and it should be Navbar. the reason for that is that React will be confused between the custom component JSX and HTML elements

for your referance

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.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.