```
import React, { useState, useEffect } from "react";
import Nav from "./nav.jsx";
import axios from "axios";
import Mensbuttons from "./mensbuttons.jsx";

export default function Standort() {
  const [radius, setRadius] = useState(10);
  const [latitude, setLatitude] = React.useState("");
  const [longitude, setLongitude] = React.useState("");
  React.useEffect(() => {
    navigator.geolocation.getCurrentPosition((position) => {
      setLatitude(position.coords.latitude);
      setLongitude(position.coords.longitude);
    });
  }, []);
  function handleClick() {
  setLongitude()
  }

  const [posts, setPosts] = useState([]);
  useEffect(() => {
    axios
      .get(
        "https://openmensa.org/api/v2/canteens?near[lat]=" +
          latitude +
          "&near[lng]=" +
          longitude +
          "&near[dist]=" +
          radius
      )
      .then((res) => {
        setPosts(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <>
      <Nav />
      <div class="header">
        <h1>Mensen in der Nähe</h1>
      </div>
      <button onClick={handleClick(2)}>2</button>
      {posts.map((list) => {
        return <Mensbuttons name={list.name} id={list.id} />;
      })}
    </>
  );
}

```

Hello guys so I have a method where I want to show nearby canteens. I do this by getting the current koordinates and passing them as a varible into the Url of the api. The Problem is the buttons of the canteens only show up when I change something at the code. So I probably have to rerender it. But if I try to do it with a button method. Nothing shows up probably because there too many rerenders.(I think that because this shows in the console)
I hope you can help me