'I am getting "'navBar' is defined but never used no-unused-vars" warning .How to solve it? (React App)

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.

javascripthtmlcssreactjs


Solution 1:[1]

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

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Knyazik01
Solution 2

Related Questions