CODEWITHSUNDEEP
htmlcssreactjsimportjsx
Hindie
Hindie

Reputation: 1

React component is declared but its value is never read BUT I HAVE "READ" IT

I have a weird simple problem here guys, I try to import a component which is called "floatingFilter" from another file and call it with usual syntax: , but VS code tell me that my component is never used and doesn't render my component!! this is my code: floatingFilter.jsx (component file)

import React from "react";
import Style from "./floatingFilter.module.css";

function floatingFilter() {
  return (
    <>
      <h1>I'm dead inside</h1>
    </>
  );
}

export default floatingFilter;

ProductsMainPart.jsx (another component where I import floatingFilter.jsx

import React from "react";
import Style from "./ProductsMainPart.module.css";
import SideBar from "./SideBar";
import { OneProduct } from "../ProductDetail/ProductData";
import ProductItem from "../ProductItem/ProductItem";
import TopFilter from "./TopFilter";
import Pagination from "./Pagination";
**import floatingFilter from "./floatingFilter";** /*vscode tell that this component is never used while I have called it */

function ProductsMainPart() {
  return (
    <>
      <div className={Style.mainPartContainer}>
        {/* side bar */}
        <aside className={`${Style.sideBarContainer}`}>
          <SideBar />
        </aside>

        {/* Main part */}
        <div className={`${Style.productsShowContainer}`}>
          {/* Top filter */}
          <div className={`${Style.topFilterContainer}`}>
            <TopFilter />
          </div>
          {/* Product Grid */}
          <div className={`${Style.productsGrid}`}>
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
            <ProductItem data={OneProduct} />
          </div>
          {/* Pagination */}
          <div className={`${Style.paginationContainer}`}>
            <Pagination />
          </div>

          <div className={`${Style.paginationContainer}`}>
            **<floatingFilter /> /* I call my imported component here */**
          </div>
        </div>
      </div>
    </>
  );
}

export default ProductsMainPart;

Upvotes: 0

Views: 977

Answers (1)

maten
maten

Reputation: 586

Every React component should start with capitalized letter.

Change the content of floatingFilter.jsx to the following:

import React from "react";
import Style from "./floatingFilter.module.css";

function FloatingFilter() { // <-- capitalized letter
  return (
    <>
      <h1>I'm dead inside</h1>
    </>
  );
}

export default FloatingFilter; // <-- capitalized letter

And also render it like this:

<div className={`${Style.paginationContainer}`}>
    <FloatingFilter />
</div>

Upvotes: 3

Related Questions