From f1038b42c71fa66cb6d86e7515a63ec5d252c99b Mon Sep 17 00:00:00 2001
From: veerjot_dm <veerjot.heer@digimantra.com>
Date: Tue, 7 Jan 2025 12:17:41 +0530
Subject: [PATCH] update pagination

---
 src/Component/Body.js      | 14 +++++++-------
 src/Component/Layout.js    |  6 +++---
 src/Component/SearchBar.js |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/Component/Body.js b/src/Component/Body.js
index a6c898b..58eb16d 100644
--- a/src/Component/Body.js
+++ b/src/Component/Body.js
@@ -15,25 +15,25 @@ function Body({ filteredData, setFilteredData, currentPage, setCurrentPage }) {
 
 
   const handleDeletePost = (id) => {
-    const updatedData = filteredData.filter((post) => post.id !== id);
+    const updatedData = filteredData?.filter((post) => post?.id !== id);
     setFilteredData(updatedData); 
   };
 
   
   const indexOfLastPost = currentPage * postsPerPage;
   const indexOfFirstPost = indexOfLastPost - postsPerPage;
-  const currentPosts = filteredData.slice(indexOfFirstPost, indexOfLastPost);
-  const totalPages = Math.ceil(filteredData.length / postsPerPage);
+  const currentPosts = filteredData?.slice(indexOfFirstPost, indexOfLastPost);
+  const totalPages = Math.ceil(filteredData?.length / postsPerPage);
 
   return (
     <div className="App">
       <ul>
     
       {filteredData.length > 0 ? (
-          filteredData.map((post) => (
-            <li key={post.id}>
-              <h1>Title: {post.title}</h1>
-              <p><b>Content:</b> {post.body}</p>
+          currentPosts.map((post) => (
+            <li key={post?.id}>
+              <h1>Title: {post?.title}</h1>
+              <p><b>Content:</b> {post?.body}</p>
               <button onClick={() => handleDeletePost(post.id)}>Delete</button>
             </li>
           ))
diff --git a/src/Component/Layout.js b/src/Component/Layout.js
index 0c55a54..c860310 100644
--- a/src/Component/Layout.js
+++ b/src/Component/Layout.js
@@ -12,7 +12,7 @@ const Layout = () => {
   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) {
@@ -27,8 +27,8 @@ const Layout = () => {
     } else {
       const filtered = data.filter(
         (post) =>
-          post?.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          post?.body.toLowerCase().includes(searchTerm.toLowerCase())
+          post?.title.toLowerCase().includes(searchTerm?.toLowerCase()) ||
+          post?.body.toLowerCase().includes(searchTerm?.toLowerCase())
       );
       if(filtered.length>0){
       setFilteredData([filtered[0]]); 
diff --git a/src/Component/SearchBar.js b/src/Component/SearchBar.js
index f7555ec..b4a549c 100644
--- a/src/Component/SearchBar.js
+++ b/src/Component/SearchBar.js
@@ -5,7 +5,7 @@ const SearchBar = ({ onSearch }) => {
   const [searchTerm, setSearchTerm] = useState('');
 
   const handleInputChange = (event) => {
-    const value = event.target.value;
+    const value = event?.target?.value;
     setSearchTerm(value);
     onSearch(value); 
   };