How to reference Jsx files inside another Jsx file?-CodePudding

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;

CodePudding user response：

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