Why map is not display in react js?

Question

I try for get markers location from Api. I so use useEffect but if I don't using render() map don't show

this code shows the markers but the map is not display and throw some errors by react . How can I fix it?

maps.js



import React, { useEffect, useState } from "react";
import GoogleMapReact from 'google-map-react';
import { render } from "@testing-library/react";

const markerStyle = {
  position: "absolute",
  top: "100%",
  left: "50%",
  transform: "translate(-50%, -100%)"
};

function SimpleMap() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const items = [];
  const [buses, setBuses] = useState([]);

  useEffect(() => {
    fetch("https://www.example.com/api/ajax/apiNew")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          //setItems(result);
          items.push(result);
          setBuses(items[0]["bus"]);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])

  if (error) {
    return <div>Error: {error.message}</div>;
  }
  else if (!isLoaded) {
    return <div>Loading...</div>;
  }
  else {
    return (
      <div style={{ height: "100vh", width: "100%" }}>
        <GoogleMapReact
          bootstrapURLKeys={{
            key: "My_API_KEY"
          }} defaultCenter={{
            lat: 60.192059,
            lng: 24.945831
          }}
        >
          <div>
            {
              items.map(item => (
                <div to={"/" + item['@attr'].code} key={item['@attr'].id} lat={item['@attr'].lat} lng={item['@attr'].long}>
                  <img style={markerStyle} src="http://icon-library.com/icon/pin-icon-png-12.html" alt="pin" />
                </div>
              ))
            }
          </div>
        </GoogleMapReact>
      </div>
    );
  }
}

export default SimpleMap;

and execute this code . map don't show . and markers image don't upload

F12 and into console tab show you important issues. Your div should have a computed size. Dynamic sizes to lazy components can lead to issues like that. For test set up fixed width and height — Aloiso Junior
– Aloiso Junior, Commented Sep 9, 2022 at 8:33

David Ho · Accepted Answer · 2022-09-09 08:33:16Z

1

{items.map((item) => {
  return (
    <div>
      ...your code
    </div>
  )
}}

answered Sep 9, 2022 at 8:33

David Ho

2878 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Calal Rafibayli Over a year ago

I try but its dont work

greybeard Over a year ago

Why didn't Calal Rafibayli's code display something, how should your suggestion help - and how come Calal Rafibayli hasn't observed it working?

Robbie Smith Over a year ago

PEBKAC. I forgot the return (...) inside the map. Duh moment. thank you!

Collectives™ on Stack Overflow

Why map is not display in react js?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related