updating filter option

src/Component/Body.js

@@ -1,71 +1,52 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
-import { api_url } from '../env';  
 import "../styleing/body.css";
 import Pagination from './Pagination';
-
-
 import AddPostForm from './addPost';
 
-function Body() { 
+function Body({ filteredData, setFilteredData, currentPage, setCurrentPage }) {
-  const [data, setData] = useState([]);
-  const [error, setError] = useState(null); 
-  const [filteredData, setFilteredData] = useState([]);
-  const [currentPage,setCurrentPage] = useState(1);
   const postsPerPage = 6;
-  const fetchData = async () => {
-    try {
-      const res = await fetch(api_url);
-      const d = await res?.json();
-      setData(d);
-      setFilteredData(d)
-    } catch (e) {
-      setError(e);
-    }
-  };
 
-  useEffect(() => {
-    fetchData();
-  }, []);
 
   const handleAddPost = (newPost) => {
     const postWithId = { ...newPost, id: Date.now() };
-    const updatedData = [postWithId,...data];
+    const updatedData = [postWithId, ...filteredData];
-    setData(updatedData);
     setFilteredData(updatedData); 
   };
+
+
   const handleDeletePost = (id) => {
-    const updatedData = data?.filter((post) => post?.id !== id);
+    const updatedData = filteredData.filter((post) => post.id !== id);
-    setData(updatedData);
     setFilteredData(updatedData); 
   };
 
+  
   const indexOfLastPost = currentPage * postsPerPage;
-  const indexOfFirstPost = indexOfLastPost-postsPerPage;
+  const indexOfFirstPost = indexOfLastPost - postsPerPage;
-  const currentPosts = filteredData.slice(indexOfFirstPost,indexOfLastPost);
+  const currentPosts = filteredData.slice(indexOfFirstPost, indexOfLastPost);
-  const totalPages = Math.ceil(filteredData?.length/postsPerPage);
+  const totalPages = Math.ceil(filteredData.length / postsPerPage);
-
-  if (error) {
-    return <div>Error: {error.message}</div>;  
-  }
 
   return (
     <div className="App">
-        <ul>
+      <ul>
     
-          {currentPosts.map((post) => (
+      {filteredData.length > 0 ? (
-            <li key={post?.id}>
+          filteredData.map((post) => (
-            
+            <li key={post.id}>
-              <h1> Title :{post?.title}</h1>
+              <h1>Title: {post.title}</h1>
-              <p> <b>Content :</b>{post?.body}</p>
+              <p><b>Content:</b> {post.body}</p>
-              <button onClick={() => handleDeletePost(post?.id)}>Delete</button>
+              <button onClick={() => handleDeletePost(post.id)}>Delete</button>
             </li>
-          ))}
+          ))
-        </ul>
+        ) : (
-        <AddPostForm onAddPost={handleAddPost} />
+          <li>No posts found</li> 
-        <Pagination
+        )}
+      </ul>
+      <AddPostForm onAddPost={handleAddPost} />
+      <Pagination
         currentPage={currentPage}
         totalPages={totalPages}
-        onPageChange={(page)=>setCurrentPage(page)}></Pagination>
+        onPageChange={(page) => setCurrentPage(page)} 
+      />
     </div>
   );
 }

src/Component/Layout.js

@@ -3,18 +3,16 @@ import Body from "./Body";
 import SearchBar from "./SearchBar";
 import "../styleing/layout.css";
 import { api_url } from "../env";
-import DarkMode from "./DarkMode";
 
 const Layout = () => {
   const [data, setData] = useState([]);
   const [filteredData, setFilteredData] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
 
- 
   const fetchData = async () => {
     try {
       const res = await fetch(api_url);
-      const fetchedData = await res?.json();
+      const fetchedData = await res.json();
       setData(fetchedData);
       setFilteredData(fetchedData); 
     } catch (error) {
@@ -24,18 +22,21 @@ const Layout = () => {
 
 
   const handleSearch = (searchTerm) => {
-    if(!searchTerm){
+    if (!searchTerm) {
       setFilteredData(data); 
+    } else {
+      const filtered = data.filter(
+        (post) =>
+          post?.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          post?.body.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      if(filtered.length>0){
+      setFilteredData([filtered[0]]); 
+      }else{
+        setFilteredData([]);
+      }
+      setCurrentPage(1); 
     }
-    else{
-    const filtered = data.filter(
-      (post) =>
-        post?.title.toLowerCase().includes(searchTerm?.toLowerCase()) ||
-        post?.body.toLowerCase().includes(searchTerm?.toLowerCase())
-    );
-    setFilteredData(filtered);
-    setCurrentPage(1); 
-  }
   };
 
   useEffect(() => {
@@ -44,17 +45,18 @@ const Layout = () => {
 
   return (
     <div className="contentPage">
-      {/* <DarkMode/> */}
       <div className="header">
         <h2 className="heading">Latest Blogs</h2>
         <SearchBar onSearch={handleSearch} />
       </div>
-     
       <div className="body">
- 
+        <Body
-        <Body data={filteredData} currentPage={currentPage} setCurrentPage={setCurrentPage} />
+          filteredData={filteredData}
+          setFilteredData={setFilteredData} 
+          currentPage={currentPage}
+          setCurrentPage={setCurrentPage}
+        />
       </div>
-      
     </div>
   );
 };

src/Component/SearchBar.js

@@ -1,4 +1,3 @@
-
 import React, { useState } from 'react';
 import '../styleing/SearchBar.css';