fixing parent render issue with pagination

Author: zbhavyai

src/App.js

@@ -1,11 +1,9 @@
 import React, { useState } from 'react';
 import Movies from './Movies';
 import SearchBar from './SearchBar';
-import PageNum from './PageNum';
 
 const App = () => {
   const [searchTerm, setSearchTerm] = useState({});
-  const [totalResults, setTotalResults] = useState(1);
 
   return (
     <div className='container-fluid'>
@@ -14,16 +12,7 @@ const App = () => {
           <SearchBar setSearchTerm={setSearchTerm} />
         </div>
       </div>
-      <div className='row'>
-        <div className='col-12' style={{ paddingLeft: '15%', paddingRight: '15%' }}>
-          <Movies searchTerm={searchTerm} setTotalPages={setTotalResults} />
-        </div>
-      </div>
-      <div className='row'>
-        <div className='col-12' style={{ paddingLeft: '15%', paddingRight: '15%' }}>
-          <PageNum setSearchTerm={setSearchTerm} searchTerm={searchTerm} totalResults={totalResults} />
-        </div>
-      </div>
+      <Movies searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
     </div>
   );
 };

src/Movies.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import MovieCard from './MovieCard';
+import PageNum from './PageNum';
 import { useFetch } from './useFetch';
 
 const Movies = (props) => {
@@ -27,26 +28,35 @@ const Movies = (props) => {
 
   return (
     <React.Fragment>
-      {isSearch === false ? (
-        <div className='card mt-4'>
-          <div className='card-body'>
-            <div className='text-secondary pt-2 text-centerr'>Hit search to get some results</div>
-          </div>
+      <div className='row'>
+        <div className='col-12' style={{ paddingLeft: '15%', paddingRight: '15%' }}>
+          {isSearch === false ? (
+            <div className='card mt-4'>
+              <div className='card-body'>
+                <div className='text-secondary pt-2 text-centerr'>Hit search to get some results</div>
+              </div>
+            </div>
+          ) : data['Response'] !== 'True' ? (
+            <div className='card mt-4'>
+              <div className='card-body'>
+                <div className='text-secondary pt-2 text-centerr'>{data['Error']}</div>
+              </div>
+            </div>
+          ) : (
+            <div className='row p-5'>
+              {data['Search']?.map((dataItem) => {
+                return <MovieCard key={dataItem['imdbID']} {...dataItem} />;
+              })}
+            </div>
+          )}
         </div>
-      ) : data['Response'] !== 'True' ? (
-        <div className='card mt-4'>
-          <div className='card-body'>
-            <div className='text-secondary pt-2 text-centerr'>{data['Error']}</div>
-          </div>
-        </div>
-      ) : (
-        <div className='row p-5'>
-          {props['setTotalPages'](data['totalResults']) &&
-            data['Search']?.map((dataItem) => {
-              return <MovieCard key={dataItem['imdbID']} {...dataItem} />;
-            })}
+      </div>
+
+      <div className='row'>
+        <div className='col-12' style={{ paddingLeft: '15%', paddingRight: '15%' }}>
+          <PageNum setSearchTerm={props['setSearchTerm']} searchTerm={props['searchTerm']} totalResults={data['totalResults']} />
         </div>
-      )}
+      </div>
     </React.Fragment>
   );
 };

src/PageNum.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const PageNum = (props) => {
-  const n = Math.ceil(props['totalResults'] / 10);
+  const n = props['totalResults'] === undefined ? 1 : Math.ceil(props['totalResults'] / 10);
 
   const handleUpdatePage = (e) => {
     props.setSearchTerm({ ...props['searchTerm'], page: e.target.value });