I’m currently building a React app. I have defined two files with default functions and I’m calling inside a “home” file. However, I’m having the warning “is defined but never used”. How can I solve that issue?
Below is the code that I’ve used for home.jsx:
import veggie from "../components/veggie";
import popular from "../components/popular";
function home() {
return (
<div>
<veggie />
<popular />
</div>
)
}
export default home;
And for veggie.jsx so far I’ve used this code:
function veggie() {
return <div>veggie</div>;
}
export default veggie;
Try capital first letter for the component name in import statements:
import Veggie from "../components/veggie";
import Popular from "../components/popular";
function Home() {
return (
<div>
<Veggie />
<Popular />
</div>
)
}
export default Home;
Source: https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized