Merge pull request #8 from devRabbani/master

Fixing pagination issue

src/App.js

@@ -1,18 +1,23 @@
-import React from "react";
-import Home from "./components/Home/index";
-import { Switch, Route } from "react-router-dom";
-import About from "./components/About";
-import Nav from "./components/Nav";
+import React, { useState } from 'react'
+import Home from './components/Home/index'
+import { Switch, Route } from 'react-router-dom'
+import About from './components/About'
+import Nav from './components/Nav'
 const App = () => {
+  const [pageNo, setPageNo] = useState(0)
   return (
     <>
       <Nav />
       <Switch>
-        <Route path="/" exact component={Home} />
-        <Route path="/info" exact component={About} />
+        <Route
+          path='/'
+          exact
+          render={() => <Home pageNo={pageNo} setPageNo={setPageNo} />}
+        />
+        <Route path='/info' exact component={About} />
       </Switch>
     </>
-  );
-};
+  )
+}
 
-export default App;
+export default App

src/components/Home/index.jsx

@@ -2,11 +2,11 @@ import React, { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import './Home.css'
 
-const Home = () => {
+const Home = ({ pageNo, setPageNo }) => {
   const [image, setImage] = useState([])
   const [dataFull, setDataFull] = useState([])
   const [searchString, setSearchString] = useState('')
-  const [pageNo, setPageNo] = useState(0)
+  // const [pageNo, setPageNo] = useState(0)
 
   const handleNext = () => {
     setPageNo((prev) => prev + 1)
@@ -106,7 +106,7 @@ const Home = () => {
               <span>
                 <p>{pageNo + 1}</p>
               </span>
-              <button disabled={pageNo === 6} onClick={handleNext}>
+              <button disabled={pageNo === 5} onClick={handleNext}>
                 Next
               </button>
             </div>