unused import even after i import the component in react-CodePudding

i imported the component called "home" and use that component inside the "div" tag as you can see below

import './App.css';
import home from './Component/Home/home.js';
function App() {
  return (
    <div className="App">
      <home/>
      <h2>This is h2 file</h2>
    </div>
  );
}
export default App;

And my home component is here

const home = () =>
{
    return(
         <div className="myname">
             <h1>This is heading 1</h1>
         </div>
    );
}
export default home;

But the problem is unable to read that component and returns unused import. can any one explain it why that is happened ?

CodePudding user response：

the component first character must be in capital

CodePudding user response：

you have to name the component with capital letters, it is a must.

so you need to change your home component to be Home.

this is how you use it:

import './App.css';
import Home from './Component/Home/home.js';
function App() {
  return (
    <div className="App">
      <Home/>
      <h2>This is h2 file</h2>
    </div>
  );
}
export default App;

and this is your home component:

const Home = () =>
{
    return(
         <div className="myname">
             <h1>This is heading 1</h1>
         </div>
    );
}
export default Home;