title: How to list 4 products on every page using ant design Pagination component in react js?
body: <p>How to list 4 products on every page using ant design Pagination component in react js?
  Here is details:
  I actually want to display 4 products on every page using ant design pagination. I have code that works correctly. (i.e in the begining 4 products display on every page). But there is one issue.  I have search and filteration as well in that component. When I search a product, if I found more than 4 products, that display on a single page but I want that after search if there are more than 4 products found then 4 products shown on every page as well. Please help me. I have tried my best but not get correct solution.</p>
  <p>Here is my data.js file:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export const data = [
      {
        logo: "",
        link: "Men's Rogaine 5% Minoxidil Foam For Hair Loss And Hair Regrowth",
        id: "681c6e998744",
        category: "Biotech",
        manufacturer: "Johanson &amp; Johanson (PVT) LTD",
        active: "Minoxidil:5%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
      {
        logo:"",
    
        link: "Men's Rogaine 5% Minoxidil Foam For Hair Loss And Hair Regrowth",
        id: "681cc76998755",
        category: " Health",
        manufacturer: "Talha",
        active: "Minoxidil:10%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
    
      {
        logo:"",
    
        link: "Men's Rogaine 5% Minoxidil Foam For Hair Loss And Hair Regrowth",
        id: "681cc76998766",
        category: " Health",
        manufacturer: "David",
        active: "Minoxidil:15%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
    
      {
        logo:"",
    
        link: "Men's Rogaine 5% Minoxidil Foam For Hair Loss And Hair Regrowth",
        id: "681cc76998777",
        category: " Health",
        manufacturer: "saad",
        active: "Minoxidil:125%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
    
      {
        logo:"",
    
        link: "Fashion",
        id: "681cc76998788",
        category: "Health",
        manufacturer: "Fahad",
        active: "Minoxidil:95%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
    
      {
        logo:"",
    
        link: "Men's Rogaine 5% Minoxidil Foam For Hair Loss And Hair Regrowth",
        id: "681cc76998799",
        category: "ABC",
        manufacturer: "ABC",
        active: "Minoxidil:25%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
    
      {
        logo:"",
    
        link: "Men's Rogaine 5% Minoxidil Foam For Hair Loss And Hair Regrowth",
        id: "68",
        category: "electronic",
        manufacturer: "Awais",
        active: "Minoxidil:5%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
    
      {
        logo:"",
    
        link: "Men's Rogaine 5% Minoxidil Foam For Hair Loss And Hair Regrowth",
        id: "681c",
        category: " Electric",
        manufacturer: "musa",
        active: "Minoxidil:5%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
    
      {
        logo:"",
        link: "GNC",
        id: "681cc76e992222",
        category: " GNC supplements, Proteins and Supplements",
        manufacturer: "Johanson &amp; Johanson (PVT) LTD",
        active: "Minoxidil:5%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
    
      {
        logo:"",
        link: "XYZ",
        id: "681cc76e9983333",
        category: " XYZ",
        manufacturer: "XYZ",
        active: "Minoxidil:5%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
    
      {
        link: "EFG",
        id: "681cc76e99744444",
        category: "EFG",
        manufacturer: "",
        active: "Minoxidil:5%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
      {
        logo:"",
        link: "HIJ",
        id: "1",
        category: "HIJ",
        manufacturer: "",
        active: "Minoxidil:5%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
      {
        logo:"",
        link: "KLM",
        id: "12",
        category: "KLM",
        manufacturer: "",
        active: "Minoxidil:5%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
      {
        logo:"",
        link: "NOP",
        id: "123",
        category: "NOP",
        manufacturer: "",
        active: "Minoxidil:5%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
      {
        logo:"",
        link: "QRS",
        id: "1234",
        category: "QRS",
        manufacturer: "",
        active: "Minoxidil:5%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
      {
        logo:"",
        link: "TUV",
        id: "123456",
        category: "TUV",
        manufacturer: "",
        active: "Minoxidil:5%",
        drug_strength: "5%",
        drug_form: "Injection",
        pack_size: "1 vial",
      },
    ];
    </code></pre>
  </div>
  </div>
  </p>
  <p>Here is my Searching.js component code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from "react";
  import "./searching.css";
  import { data } from "./data";
  import { FilterOutlined } from "@ant-design/icons";
  import {
    Typography,
    Space,
    Card,
    Button,
    Tree,
    Input,
    Pagination,
    Empty,
    Modal,
  } from "antd";
  
  const Searching = () =&gt; {
    const { Text, Title, Link } = Typography;
    const { Search } = Input;
    
     // dynamic data
    const [maindata, setMainData] = useState(data?.slice(0, 4));
  
    // search filteration states
    const [search, setSearch] = useState("");
    const exculdeData = [
      "id",
      "logo",
      "link",
      "category",
      "drug_strength",
      "drug_form",
      "pack_size",
    ];
  
    // pagination states
    const [number, setNumber] = useState(1);
    const [postsPerPage] = useState(4);
  //   handle Pagination
    const handlePage = (pageNumber) =&gt; {
      console.log(pageNumber);
      setNumber(pageNumber);
  
      const indexOfLastPost = pageNumber * postsPerPage;
      const indexOfFirstPost = indexOfLastPost - postsPerPage;
      const currentPosts = data?.slice(indexOfFirstPost, indexOfLastPost);
      setMainData(currentPosts);
    };
  //   handle search change
    const handleChange = (value) =&gt; {
      setSearch(value);
    };
    
     //   click on search button to trigger it
    const onSearch = (value) =&gt; {
      const lowerCaseValue = value.toLowerCase().trim();
      if (!lowerCaseValue) {
        setMainData(data);
      } else {
        const filterSearch = data.filter((item) =&gt; {
          // console.log(Object.keys(item));
          return Object.keys(item).some((key) =&gt; {
            // console.log(key);
            return exculdeData.includes(key)
              ? false
              : item[key].toString().toLowerCase().includes(lowerCaseValue);
          });
        });
        // consoleFun(filterSearch)
        setMainData(filterSearch);
      }
    };
    
     return (
      &lt;div&gt;
        &lt;div style={{ width: "90%" }}&gt;
          &lt;div className="banner"&gt;
            &lt;Text&gt;
              &lt;Title level={3} className="search_title"&gt;
                Search Products
              &lt;/Title&gt;
            &lt;/Text&gt;
            &lt;Text&gt;
              &lt;Title level={5}&gt;
                Find numerous unregistered products that can fulfill you need
              &lt;/Title&gt;
            &lt;/Text&gt;
          &lt;/div&gt;
          &lt;div className="main_container"&gt;
            {/* for search */}
           
  
            &lt;div&gt;
              &lt;Search
                enterButton="Search"
                size="large"
                placeholder="Search Product"
                className="search_bar"
                onSearch={onSearch}
                onChange={(e) =&gt; handleChange(e.target.value)}
              /&gt;
            &lt;/div&gt;
           
          &lt;/div&gt;
          {/* for showing result */}
          &lt;div className="showing_result"&gt;
            &lt;div className="filter_search"&gt;
              &lt;Text&gt;Showing results for {`"${search} "`}&lt;/Text&gt;
            &lt;/div&gt;{" "}
            &lt;div className="filter_result"&gt;
              &lt;Text&gt;
                showing {number}-{postsPerPage} of {data?.length} results
              &lt;/Text&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          {/* for showing cards data */}
          {maindata.length ? (
            maindata.map((item) =&gt; {
              const {
                logo,
                link,
                id,
                category,
                manufacturer,
                active,
                drug_strength,
                drug_form,
                pack_size,
              } = item;
              return (
                &lt;div key={id} className="carrd"&gt;
                  &lt;Card&gt;
                    &lt;div className="card_container"&gt;
                      &lt;div&gt;
                        &lt;img
                          src="https://picsum.photos/200/300"
                          alt="product image"
                          className="cards_img"
                        /&gt;
                        
                      &lt;/div&gt;
                      &lt;Space direction="vertical" className="card_data"&gt;
                        &lt;img src="" alt="Logo" /&gt;
                        &lt;Text&gt;
                          &lt;Link&gt;
                            &lt;strong className="card_link"&gt;{link}&lt;/strong&gt;
                          &lt;/Link&gt;
                        &lt;/Text&gt;
                        &lt;Text type="secondary"&gt;
                          Product ID: &lt;Text&gt;{id}&lt;/Text&gt;
                        &lt;/Text&gt;
  
                        &lt;Text type="secondary"&gt;
                          Category:
                          &lt;Text className="blue_text"&gt;{category}&lt;/Text&gt;
                        &lt;/Text&gt;
  
                        &lt;Text type="secondary"&gt;
                          Manufecture:{" "}
                          &lt;Text className="blue_text"&gt;{manufacturer}&lt;/Text&gt;
                        &lt;/Text&gt;
  
                        &lt;Text type="secondary"&gt;
                          Active Pharmaceutical Ingredients:{" "}
                          &lt;Text className="blue_text"&gt;{active}&lt;/Text&gt;
                        &lt;/Text&gt;
  
                        &lt;Text type="secondary"&gt;
                          Drug Strength: &lt;Text&gt;{drug_strength}&lt;/Text&gt;
                        &lt;/Text&gt;
  
                        &lt;Text type="secondary"&gt;
                          Drug Form: &lt;Text&gt;{drug_form}&lt;/Text&gt;
                        &lt;/Text&gt;
  
                        &lt;Text type="secondary"&gt;
                          Pack Size: &lt;Text&gt;{pack_size}&lt;/Text&gt;
                        &lt;/Text&gt;
                        &lt;Space className="buttons"&gt;
                          &lt;Space&gt;
                            &lt;Button type="primary"&gt;View Details&lt;/Button&gt;
                            &lt;Button style={{ background: "green" }}&gt;
                              Send RFI
                            &lt;/Button&gt;
                          &lt;/Space&gt;
                        &lt;/Space&gt;
                      &lt;/Space&gt;
                    &lt;/div&gt;
                  &lt;/Card&gt;
                &lt;/div&gt;
              );
            })
          ) : (
            &lt;div className="empty_container"&gt;
              &lt;div&gt;
                &lt;Empty description={false} className="empty_data"&gt;
                  No Product Found
                &lt;/Empty&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          )}
          &lt;div className="pagination"&gt;
            {maindata?.length == 0 ? null : search?.length ? (
              &lt;Space&gt;
                &lt;Pagination
                  defaultCurrent={number}
                  total={maindata?.length}
                  defaultPageSize={postsPerPage}
                  onChange={handlePage}
                /&gt;
              &lt;/Space&gt;
            ) : (
              &lt;Space&gt;
                &lt;Pagination
                  defaultCurrent={number}
                  total={data?.length}
                  defaultPageSize={postsPerPage}
                  onChange={handlePage}
                /&gt;
              &lt;/Space&gt;
            )}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Searching;</code></pre>
  </div>
  </div>
  </p>