score:3

Accepted answer

<nav/> is a valid html tag, so eslint thinks your jsx is referencing that html tag, and not the variable that holds the component you imported.

i recommend renaming your component to be nav to remove all ambiguity.

score:0

three possibilities where you may have been wrong :-

  1. react shows this error because whenever someone declares a variable but didn't use it. in your case you didn't use this nav in your entire app.js file.
import nav from './nav'
  1. you have forgotten to start the <nav>
function app() {
  return (
    <div classname="app">
      
      <browserrouter>
      <nav/>
      
      <routes>
      <route>
      
        <route exact path="/" element={<home/>} />
        <route exact path="/about" element={<about/>} />
        <route exact path="/contact" component={<contact/>} />
      </route>
      </routes>
      </browserrouter>
      
    </div>
  );
}

export default app;
  1. or custom components in react always start with a captial letter, not like this
<nav> <nav/>

but like this

<nav> <nav/>

score:1

from the docs,

a variable foo is considered to be used if any of the following are true:

it is called (foo()) or constructed (new foo())

it is read (var bar = foo)

it is passed into a function as an argument (dosomething(foo))

it is read inside of a function that is passed to another function (dosomething(function() { foo(); }))

so that, said, you maybe be missing some parsing so your valid jsx and reactjs syntax can be valid eslint syntax:

eslint-plugin-react

score:1

this happenes because your compiler does not recognize jsx syntax as being used.

so, you have to install: npm install eslint-plugin-react --save-dev

then in your .eslintrc.json file you should add react/jsx-uses-react


Related Query

More Query from same tag