Error in the code please check it and if possible provide me solution

Ankit Srivastava — Thu, 03 Aug 2023 19:40:10 +0000

import { useState } from "react";
import Header from "./components/Header";
import Search from "./components/Search";
import Hero from "./components/Hero";
import Body from "./components/Body";
import Footer from "./components/Footer";
import Shop from "./components/Shop";
import Sale from "./components/Sale";
import CustomerCare from "./components/CustomerCare";
import { createBrowserRouter , Outlet } from "react-router-dom";

const AppLayout = () => {

const [allProducts , setAllProducts] = useState([]);
const [filteredProducts , setFilteredProducts] = useState([]);
const [searchText , setSearchText] = useState("");


function filterSearchProduct(searchTxt , productslist) {
    return productslist.filter((product) => product.title.toLowerCase().includes(searchTxt.toLowerCase()));
}


return (
    <>
        <Search  
            searchText={searchText} 
            setSearchText={setSearchText} 
            filterSearchProduct={filterSearchProduct}
            allProducts={allProducts}    
            setFilteredProducts={setFilteredProducts}        
        />
        <Header/>
        <Outlet/>
        <Hero/>
        <Body allProducts={allProducts} setAllProducts={setAllProducts} filteredProducts={filteredProducts} setFilteredProducts={setFilteredProducts} />

        <Footer/>
    </>
)

}

export const appRouter = createBrowserRouter([

{
    path: '/',
    element : <AppLayout/>,
    children : [
        {
            path: '/shop',
            element: <Shop/>
        },
        {
            path: '/sale',
            element: <Sale/>
        },
        {
            path: 'customer-care',
            element: <CustomerCare/>
        },
        {
            path :'/',


  element : <Body allProducts={allProducts} setAllProducts={setAllProducts} filteredProducts={filteredProducts} setFilteredProducts={setFilteredProducts} />

    },

    ]
}

]);

export default AppLayout;
erros showing
Failed to compile.

[eslint]
src\AppLayout.js
Line 67:36: 'allProducts' is not defined no-undef
Line 67:65: 'setAllProducts' is not defined no-undef
Line 67:99: 'filteredProducts' is not defined no-undef
Line 67:138: 'setFilteredProducts' is not defined no-undef

Search for the keywords to learn more about each error.
ERROR in [eslint]
src\AppLayout.js
Line 67:36: 'allProducts' is not defined no-undef
Line 67:65: 'setAllProducts' is not defined no-undef
Line 67:99: 'filteredProducts' is not defined no-undef
Line 67:138: 'setFilteredProducts' is not defined no-undef

Search for the keywords to learn more about each error.
please any one help , how i can overcome from this error

DEV Community: Ankit Srivastava

Error in the code please check it and if possible provide me solution