🔨 Filtrando títulos con JavaScript

src/Context/Context.jsx

@@ -28,11 +28,11 @@ export const ShoppingCartProvider = ({ children }) => {
 
   //Get products
   const [items, setItems] = useState(null);
+  const [filteredItems, setFilteredItems] = useState(null);
 
   //Get products by title
   const [seachByTitle, setSeachByTitle] = useState(null);
-  console.log('seachByTitle: ', seachByTitle);
-
+
   useEffect(() => {
     fetch('https://api.escuelajs.co/api/v1/products')
       .then((res) => res.json())
@@ -41,6 +41,17 @@ export const ShoppingCartProvider = ({ children }) => {
       });
   }, []);
 
+  const filteredItemsByTitle = (items, searchByTitle) => {
+   return items?.filter(item => item.title.toLowerCase().includes(searchByTitle.toLowerCase())); 
+  }
+
+  useEffect(() => {
+    if(seachByTitle) {
+      setFilteredItems(filteredItemsByTitle(items, seachByTitle));
+    }
+  },[items, seachByTitle]);
+
+
   return (
     <ShoppingCartContext.Provider
       value={{
@@ -62,6 +73,7 @@ export const ShoppingCartProvider = ({ children }) => {
         setItems,
         seachByTitle,
         setSeachByTitle,
+        filteredItems
       }}
     >
       {children}

src/Pages/Home/Home.jsx

@@ -6,6 +6,20 @@ import { ShoppingCartContext } from '../../Context/Context';
 const Home = () => {
   const context = useContext(ShoppingCartContext);
 
+  const renderView = () => {
+    if (context.seachByTitle?.length > 0) {
+      if (context.filteredItems?.length > 0) {
+        return context.filteredItems?.map((item) => (
+          <Card key={item.id} data={item} />
+        ));
+      }
+      else{
+        return <div>We did not find anything :-(</div>
+      }
+    } else {
+      return context.items?.map((item) => <Card key={item.id} data={item} />);
+    }
+  };
   return (
     <Layout>
       <div className="flex w-80  relative items-center justify-center mb-4">
@@ -15,12 +29,10 @@ const Home = () => {
         type="text"
         placeholder="Search a product"
         className="rounded-lg border border-black w-80 p-4 mb-4 focus:outline-none"
-        onChange={(event) =>context.setSeachByTitle(event.target.value)}
+        onChange={(event) => context.setSeachByTitle(event.target.value)}
       />
       <div className="grid gap-4 grid-cols-4 w-full max-w-screen-lg">
-        {context.items?.map((item) => (
-          <Card key={item.id} data={item} />
-        ))}
+        {renderView()}
       </div>
       <ProductDetail />
     </Layout>