Need some help with react

JavaScript
1

hey guys im using a map api and it only allows me to set the map width in js. So in order to make it responsive i wrote this code but i dont know why its not working…

function useWindowSize() {

  const [size, setSize] = useState([0]);

  let phone = "320";

  let tablet = "900";

  let bigScreen = "2600";

  let bigLaptop = "1400";

  let laptop = "1000";

  useLayoutEffect(() => {

    function updateSize() {

      setSize([window.innerWidth]);

    }

    window.addEventListener("resize", updateSize);

    updateSize();

    return () => window.removeEventListener("resize", updateSize);

  }, []);

  if (size > bigLaptop && size < bigScreen) {

    return "80vw";

  } else if (size > laptop && size < bigLaptop) {

    return "67vw";

  } else if (size < tablet) {

    return "40vw";

  }

}

//For map API location Bali

export function Map() {

  const [mediaWidth] = useWindowSize();

  const [viewport, setViewport] = useState({

    latitude: -8.340539,

    longitude: 115.091949,

    width: { mediaWidth },

    height: "100vh",

    zoom: 10,

  });
2

I guess problem is that you’re returning a string from useWindowSize, but you’re, destructuring array (const [mediaWidth] = useWindowSize();).
Try:

const mediaWidth = useWindowSize();
3

nah it didnt work :pensive:

4

Try to replace with (while still keeping my previous suggestion):

width: mediaWidth,
1 Like
5

thanks you man i love u lol had so much trouble cuz of this damn thing