My full code

class Shop extends Component {
  onClickHome = () => {
    this.props.history.push("/");
  };
  onClickShop = () => {
    this.props.history.push("/Shop");
  };
  onClickAbout = () => {
    this.props.history.push("/About");
  };
  onClickContact = () => {
    this.props.history.push("/Contact");
  };
  onClickLogin = () => {
    this.props.history.push("/login");
  };
  onClickLogout = () => {
    localStorage.setItem("token", undefined);
    localStorage.setItem("Btoken", undefined);
    this.props.history.push("/login");
  };

  constructor(props) {
    super(props);
    this.state = {
      shops: [],
      burger: "0",
      pointerEvents: "none",
      width: "30px",
      logout: "none",
      login: "flex",
      loadingMAP: true,
      search: "",
      modal: true,
      addresses: [],
      currentPosition: {},
      userLocation: { lat: 39.0119, lng: -98.4842 },
      zoom: 4,
      loadingMAP2: "block",
      dashboardoftheB: "none",
      FetchingData: "block",
      showMap: "ddaadsdas",
      gridlistDisplay: "flex",
      showmaptext: "Show map",
      mapMapBoxDisplayBlockNone: "block",
      loadingShopBusinesses: "none",
      shopbusinessesmapbox: [],
      loadmorebtndisplayshopcount: "block",
      loadmorebtntextshopcount: "Loading...",
      count: 0,
      searchtest: "",
    };
  }
  success = (position) => {
    window.location = "#";
    this.setState({
      userLocation: {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      },
      zoom: 12,
    });
  };
  error = (err) => {
    console.error(err);
    window.location = "#";
    axios
      .get("https://api.ipify.org/?format=json")
      .then((res) => {
        const ip = res.data.ip;
        axios
          .get(`http://ip-api.com/json/${ip}`)
          .then((res) => {
            this.setState({
              userLocation: {
                lat: res.data.lat,
                lng: res.data.lon,
              },
              zoom: 12,
            });
          })
          .catch((err) => {
            console.error(err);
          });
      })
      .catch((err) => {
        console.error(err);
      });
  };
  async componentDidMount() {
    this.setState({
      loadingShopBusinesses: "flex",
    });
    console.log(this.props.userLocation);
    this.setState({
      FetchingData: "block",
    });
    const tokenval = localStorage.getItem("token");
    const tokenvalB = localStorage.getItem("Btoken");

    var tokenC = `${tokenval}`;
    var tokenB = `${tokenvalB}`;
    if (!localStorage.getItem("visted")) {
      this.setState({
        login: "flex",
        logout: "none",
      });
      localStorage.setItem("visted", true);
    }
    if (tokenB && tokenC === "undefined") {
      if (this.state.login === "none") {
        this.setState({
          login: "flex",
          logout: "none",
        });
      }
    } else if (tokenB || tokenC !== "undefined") {
      if (this.state.login === "flex") {
        this.setState({
          login: "none",
          logout: "flex",
        });
      }
    }
    if (localStorage.getItem("type") === "business") {
      this.setState({ dashboardoftheB: "flex" });
    } else {
      this.setState({ dashboardoftheB: "none" });
    }

    var limit = 12;
    const headers = {
      "auth-token": tokenval,
      limit: limit,
    };
    const headers2 = {
      "auth-token": tokenval,
      limit: limit + limit,
    };
    // this.scrollListener = window.addEventListener("scroll", (e) => {
    //   this.handleScrollLoadMore(e);
    // });

    var check = "";
    // trackPromise(

    const parsed = qs.parse(this.props.location.search);
    console.log(parsed.search);

    if (parsed.search !== undefined || null || NaN) {
      console.log("search ther 3847dh");
      const tokenval = localStorage.getItem("token");
      const headers = {
        "auth-token": tokenval,
      };
      axios
        .post(
          "http://localhost:3003/app/BusinessLoginAPI/shop/search",
          {
            query: parsed.search,
          },
          { headers }
        )
        .then((res) => {
          this.setState({ loadmorebtndisplayshopcount: "none" });
          this.setState({
            shops: res.data.results.map((shop) => shop),
          });
        })
        .catch((err) => {
          console.error(err);
        });
    } else {
      const headers222 = {
        "auth-token": localStorage.getItem("token"),
        page: 0,
      };
      axios
        .get("http://localhost:3003/app/BusinessLoginAPI/shop/count")
        .then((res) => {
          this.setState({
            count: res.data,
          });
          console.log(res);
        })
        .catch((e) => {
          console.log(e);
        });
      await axios
        .get("http://localhost:3003/app/BusinessLoginAPI/shop/pagination", {
          headers222,
        })
        .then((response) => {
          this.setState({
            shops: response.data,
          });
          console.log(limitcounter);
          // limitcounter++;
        })

        .catch((err) => {
          console.error(err);
        });
      this.scrollListener = window.addEventListener("scroll", (e) => {
        this.handleScrollLoadMore(e);
      });
    }

    // );

    this.setState({
      loadingMAP: false,
      loadingMAP2: "none",
    });

    await axios
      .get("http://localhost:3003/app/payment/encryption")
      .then((res) => {
        if (res.data.status === "success") {
          check = undefined;
          axios
            .post("http://localhost:3003/app/contact/sendqrcodetoBusiness", {
              emailq: res.data.emailbusiness,
              amount: res.data.amountPaid,
              bname: res.data.businessName,
              name: `${localStorage.getItem("fname")} ${localStorage.getItem(
                "lname"
              )}`,
            })
            .then((res) => {
              console.log(res);
            })
            .catch((err) => {
              console.error(err);
            });
          var dl = {
            name: res.data.businessName,
            amountPaid: res.data.amountPaid,
            amountLeft: 4,
            QRcode: res.data.message,
          };

          if (tokenB || tokenC === "undefined") {
            this.props.history.push({
              pathname: "/QRCode",
              state: {
                value: res.data.message,
                bname: res.data.businessName,
              },
            });
            return 0;
          } else if (tokenB && tokenC === "undefined") {
            this.props.history.push({
              pathname: "/QRCode",
              state: {
                value: res.data.message,
                bname: res.data.businessName,
              },
            });
            return 0;
          } else {
            this.props.history.push({
              pathname: "/QRCode",
              state: {
                value: res.data.message,
                bname: res.data.businessName,
              },
            });
          }
          this.props.history.push({
            pathname: "/QRCode",
            state: {
              value: res.data.message,
              bname: res.data.businessName,
            },
          });
          return 0;
        } else if (res.data.status === "failure") {
          check = "yes";
          console.log("User has not bought anything yet.");
        }
      });

    this.setState({
      FetchingData: "none",
    });
    this.setState({
      loadingShopBusinesses: "none",
    });
    axios
      .get("http://localhost:3003/app/BusinessLoginAPI/shop")
      .then((response) => {
        this.setState({
          shopbusinessesmapbox: response.data,
        });
      })

      .catch((err) => {
        console.log(err);
        this.onClickLogin();
      });
  }

  optionChange = (e) => {
    this.setState({ businessCatagory: e.target.value });
  };

  handleOpen = () => {
    this.setState({
      open: "true",
    });
  };
  handleClose = () => {
    this.setState({
      open: "false",
    });
  };

  handleSearch = () => {
    if (!this.state.search.replace(/\s/g, "").length) {
      if (this.state.search === "") {
        const headers222 = {
          "auth-token": localStorage.getItem("token"),
          page: 0,
        };
        axios
          .get("http://localhost:3003/app/BusinessLoginAPI/shop/pagination", {
            headers222,
          })
          .then((response) => {
            this.setState({
              shops: response.data,
            });
            console.log(limitcounter);
            // limitcounter++;
          })

          .catch((err) => {
            console.error(err);
          });
      } else {
      }
    } else {
      const tokenval = localStorage.getItem("token");
      const headers = {
        "auth-token": tokenval,
      };
      axios
        .post(
          "http://localhost:3003/app/BusinessLoginAPI/shop/search",
          {
            query: this.state.search,
          },
          { headers }
        )
        .then((res) => {
          this.setState({ loadmorebtndisplayshopcount: "none" });
          this.setState({
            shops: res.data.results.map((shop) => shop),
          });
        })
        .catch((err) => {
          console.error(err);
        });
    }
  };

  keySearch = async (e) => {
    if (e.keyCode == 13) {
      if (!this.state.search.replace(/\s/g, "").length) {
        if (this.state.search === "") {
          const headers222 = {
            "auth-token": localStorage.getItem("token"),
            page: 0,
          };
          axios
            .get("http://localhost:3003/app/BusinessLoginAPI/shop/pagination", {
              headers222,
            })
            .then((response) => {
              this.setState({
                shops: response.data,
              });
              console.log(limitcounter);
              // limitcounter++;
            })

            .catch((err) => {
              console.error(err);
            });
        } else {
        }
      } else {
        const tokenval = localStorage.getItem("token");
        const headers = {
          "auth-token": tokenval,
        };
        axios
          .post(
            "http://localhost:3003/app/BusinessLoginAPI/shop/search",
            {
              query: this.state.search,
            },
            { headers }
          )
          .then((res) => {
            this.setState({ loadmorebtndisplayshopcount: "none" });
            this.setState({
              shops: res.data.results.map((shop) => shop),
            });
          })
          .catch((err) => {
            console.error(err);
          });
      }
    } else {
      return 0;
    }
  };
  loadMore = async () => {
    var top = window.pageYOffset || document.documentElement.scrollTop,
      left = window.pageXOffset || document.documentElement.scrollLeft;
    const headers = {
      "auth-token": localStorage.getItem("token"),
      page: limitcounter,
    };
    // axios
    //   .get("http://localhost:3003/app/BusinessLoginAPI/shop/count")
    //   .then((res) => {
    //     console.log(res);
    //   })
    //   .catch((e) => {
    //     console.log(e);
    //   });
    let shopsStatic = this.state.shops;

    var checker = 17 * limitcounter;
    if (this.state.count <= checker) {
      this.setState({ loadmorebtndisplayshopcount: "none" });
    } else {
      this.setState({
        loadmorebtntextshopcount: "Loading...",
      });
      axios
        .get("http://localhost:3003/app/BusinessLoginAPI/shop/pagination", {
          headers,
        })
        .then((response) => {
          var total = shopsStatic.concat(response.data);

          this.setState({
            shops: total,
          });

          window.scrollTo(left, top);
          this.setState({
            loadmorebtntextshopcount: "Loading...",
          });
        })

        .catch((err) => {
          console.error(err);
        });

      limitcounter++;
    }
  };
  handleScrollLoadMore = () => {
    var lastLi = document.getElementById("lastscrollshop");
    var lastLiOffset = lastLi.offsetTop + lastLi.clientHeight;
    var pageOffset = window.pageYOffset + window.innerHeight;
    if (pageOffset > lastLiOffset) {
      this.loadMore();
    }
  };

  render() {
    // const phoneNumber = this.state.shops.map((shop) => {
    //   return <p key={shop._id}>{shop.phoneNumber}</p>;
    // });

    // const bname = this.state.shops.map((shop) => {
    //   return <p key={shop._id}>{shop.bname}</p>;
    // });
    // const description = this.state.shops.map((shop) => {
    //   return <p key={shop._id}>{shop.description}</p>;
    // });

    return (
      <div className="Shop">
        <div
          className="loaderwrapper"
          style={{
            zIndex: 9999999999,
            display: this.state.loadingShopBusinesses,
          }}
        >
          <div className="loader"></div>
        </div>
        <div
          className="burger1 khdsaid12e"
          style={{
            height: "100%",
            opacity: this.state.burger,
            pointerEvents: this.state.pointerEvents,
            position: "fixed",
          }}
        >
          <h3
            className="Hheading1b"
            style={{ fontSize: "20px" }}
            onClick={this.onClickHome}
          >
            <span>Home</span>
          </h3>
          <h3
            className="Hheading1b"
            style={{ fontSize: "20px" }}
            onClick={this.onClickShop}
          >
            <span>Shop</span>
          </h3>
          <h3
            className="Hheading1b"
            style={{ fontSize: "20px" }}
            onClick={this.onClickAbout}
          >
            <span>About</span>
          </h3>
          <h3
            className="Hheading1b"
            style={{ fontSize: "20px" }}
            onClick={this.onClickContact}
          >
            <span>Contact</span>
          </h3>
          {/* <a href="/BDashboard">
            <span
              className="Hheading1b"
              style={{ display: this.state.dashboardoftheB }}
            >
              <span>Dashboard</span>
            </span>
          </a> */}
          <h3
            className="Hheading2b"
            style={{ fontSize: "20px", display: this.state.login }}
            onClick={this.onClickLogin}
          >
            <span>Login</span>
          </h3>
          <h3
            className="Hheading2b"
            style={{ fontSize: "20px", display: this.state.logout }}
            onClick={this.onClickLogout}
          >
            <span>Logout</span>
          </h3>
        </div>

        <header
          className="Home-Header"
          style={{
            zIndex: "900909",
          }}
        >
          <div className="HH">
            <div className="logoimg" onClick={this.onClickHome}>
              <img
                src={require("./Assets/golo2.png")}
                className="logoimage"
                alt="localmainstreet"
              ></img>
            </div>
            <div className="logoimg2" onClick={this.onClickHome}>
              <img
                src={require("./Assets/logor.png")}
                className="logoimage2"
                alt="localmainstreet"
              ></img>
            </div>
            <div
              className="burgermenu"
              style={{
                zIndex: "493324",
              }}
              onClick={() => {
                this.setState({
                  burger: "1",
                  width: "30px",
                  pointerEvents: "all",
                });
                if (this.state.burger === "1") {
                  this.setState({
                    burger: "0",
                  });
                }
                if (this.state.pointerEvents === "all") {
                  this.setState({
                    pointerEvents: "none",
                  });
                }
              }}
            >
              <div
                className="bar"
                style={{
                  width: this.state.width,
                }}
              ></div>
              <div
                className="bar"
                style={{
                  width: this.state.width,
                }}
              ></div>
              <div
                className="bar"
                style={{
                  width: this.state.width,
                }}
              ></div>
            </div>

            <h3 className="Hheading1" onClick={this.onClickHome}>
              <span>Home</span>
            </h3>
            <h3 className="Hheading1" onClick={this.onClickShop}>
              <span>Shop</span>
            </h3>
            <h3 className="Hheading1" onClick={this.onClickAbout}>
              <span>About</span>
            </h3>
            <h3 className="Hheading1" onClick={this.onClickContact}>
              <span>Contact</span>
            </h3>
            <h3
              className="Hheading2"
              style={{ display: this.state.login }}
              onClick={this.onClickLogin}
            >
              <span>Login</span>
            </h3>
            <h3 className="Hheading2" style={{ display: this.state.logout }}>
              <a href="/BDashboard">
                <span
                  className="Hheading1"
                  style={{ display: this.state.dashboardoftheB }}
                >
                  <span>Dashboard</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </span>
              </a>
              <span onClick={this.onClickLogout}>Logout</span>
            </h3>
          </div>
        </header>

        <div
          className="gridlist"
          style={{
            // width: "50vw",
            // marginTop: "26vh !important",
            // // all: "unset",
            display: this.state.gridlistDisplay,
          }}
        >
          <div className="search">
            <label
              style={{
                cursor: "text",
              }}
              className="Search_Businesses"
            >
              Search by City, Zip, or Name
              {/* <a
              href="javascript:void(0)"
              onClick={() => {
                if (this.state.gridlistDisplay === "flex") {
                  this.setState({
                    gridlistDisplay: "none",
                    showmaptext: "Back",
                    mapMapBoxDisplayBlockNone: "block",
                  });
                } else if (this.state.gridlistDisplay === "none") {
                  this.setState({
                    gridlistDisplay: "flex",
                    showmaptext: "Show Map",
                    mapMapBoxDisplayBlockNone: "none",
                  });
                }
              }}
              className="link"
            >
              {this.state.showmaptext}
            </a> */}
            </label>
            <div
              className="search-main"
              style={{
                display: "flex",
                flexDirection: "row",
              }}
            >
              <input
                placeholder="Search by City, Zip Code, or Name"
                type="text"
                className="searchBar redinput"
                style={{
                  borderRadius: "6px 0px 0px 6px",
                }}
                value={this.state.search}
                onChange={(e) => this.setState({ search: e.target.value })}
                onKeyDown={this.keySearch}
              ></input>
              <input
                type="button"
                className="searchSubmit"
                value="Search"
                style={{
                  backgroundColor: "#FFDC00",
                  cursor: "pointer",
                  marginTop: "6px",
                  borderRadius: "0px 0px 0px 0px",
                  width: "100px",
                }}
                onClick={this.handleSearch}
              ></input>
              <input
                type="button"
                className="searchSubmit"
                value="View Full Map"
                style={{
                  backgroundColor: "#FFDC00",
                  cursor: "pointer",
                  marginTop: "6px",
                  borderRadius: "0px 6px 6px 0px",
                  width: "200px",
                }}
                onClick={() => {
                  this.props.history.push({
                    pathname: "/MapView",
                    state: {
                      latlng: this.state.addresses,
                    },
                  });
                }}
              ></input>
            </div>
          </div>
          <p
            style={{
              textAlign: "center",
              display: this.state.FetchingData,
            }}
          >
            Fetching Data...
          </p>
          {this.state.shops.map((shop) => (
            <MediaCard
              card={shop}
              className="MediaCard"
              bname={shop.bname}
              emailb={shop.emailb}
              description={shop.description}
              phoneNumber={shop.phoneNumber}
              history={this.props.history}
              businessCatagory={shop.businessCatagory}
              stripeId={shop.stripeAccountId}
              address={shop.address}
              website={shop.website}
              key={Math.floor(100000 + Math.random() * 900000)}
            />
          ))}
          <br></br>
          <input
            type="button"
            value={this.state.loadmorebtntextshopcount}
            style={{
              backgroundColor: "#ffc728",
              display: this.state.loadmorebtndisplayshopcount,
            }}
            id="lastscrollshop"
            onClick={this.loadMore}
          ></input>
        </div>
        <div className="mapMapBox">
          <div
            style={{
              width: "fit-content",
              margin: "auto",
              textAlign: "center",
            }}
          >
            <i
              style={{
                display: this.state.loadingMAP2,
                // width: "fit-content",
                // margin: "5px auto",
              }}
              class="fa fa-refresh fa-spin"
            ></i>

            {this.state.loadingMAP ? "Loading The Map..." : ""}
          </div>
          {/* {this.state.currentPosition !== {} && ( */}

          <MapBox
            currentPosition={this.state.currentPosition}
            latlng={this.state.shopbusinessesmapbox.map((shop) => shop)}
            userLocation={this.state.userLocation}
            zoom={this.state.zoom}
            shop={this.state.shops}
          />

          {/* )} */}
        </div>
      </div>
    );
  }
}

export default Shop;