> ## Documentation Index
> Fetch the complete documentation index at: https://docs.prequel.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Viewing existing destinations

> Render existing destinations for your users to inspect.

<Steps>
  <Step title="Creating a getDestinations function">
    In your frontend, call the `useGetDestinationsForRecipient` hook to generate a function that fetches a scoped auth token and uses it to get destinations for the recipient scoped by the token. Use one of the `fetchToken` functions you wrote in [Building an "Add Destination" connection form](/export/sdks/react/tutorials/building-an-add-destination-connection-form) here to create one.

    ```tsx title="Create getDestinations" icon="react" expandable theme={null}
    const getDestinations = useGetDestinations(
      fetchTokent,        // fetchToken implementation, takes no parameters
      "app.example.co",   // the origin of your React app (used to allow CORS),
      PREQUEL_HOST        // Optional (default api.prequel.co): the host url of your Prequel API
    );
    ```
  </Step>

  <Step title="Using getDestinations">
    Use `getDestinations` created in Step 1 to fetch destinations for the given recipient.

    ```tsx title="Fetch destinations" icon="react" expandable theme={null}
    // Local state to store existing destinations
    const [destinations, setDestinations] = useState<ExistingDestination[]>();

    // Async function fetches existing destinations from Prequel API
    const fetchDestinations = async (id: string) => {
      const destinations = await getDestinations(id);
      setDestinations(destinations);
    };

    useEffect(() => {
      fetchDestinations();  // Fetch the destinations for active user's recipient
    }, []);
    ```
  </Step>

  <Step title="Rendering destinations">
    Render the `destinations` fetched from the Prequel API for inspection.

    ```tsx title="RecipientDestinations" icon="react" expandable theme={null}
    const RecipientDestinations = () => {
      // Recipient fetching elided

      return (
        <>
          {destinations.map((d) => (
            <div key={d.id}>
              <p>{d.id}</p>
              <p>{d.name}</p>
              <p>{d.vendor}</p>
              // ...other destination fields
            </div>
          ))}
        </>
      );
    }
    ```
  </Step>
</Steps>