Uncaught TypeError: guilds.map is not a function

Question

I'm pretty new to discord.js coding and have too it upon myself to create a dashboard for my discord.js bot but I've ran into this problem and I don't know how to fix it could anyone help me? If you want some other files I will add them! Code with error:

MenuWrapper index.jsx

    import React from 'react';
    import { Link } from "react-router-dom";
    
    
    
    export function MenuComponent( {
      guilds,
    }) {
        
        
    
        return (
            <div>
              {
                guilds.map((guild) => (
                    <div>
                       <li>{ guild.name }</li>
                       <Link to= { `/dashboard/${guild.id}` }>View Dashboard</Link>
                    </div>
                ))
              }
            </div>
        );
    }

How MenuComponent is used:

import React from 'react';
import { getGuilds, getUserDetails } from '../../utils/api';
import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';
import { MenuComponent } from '../../components';
import background from "./placeholder.png";

export function MenuPage( {

}) {
    
    const [user, setUser] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    const [guilds, setGuilds] = React.useState( [] );
    let history = useNavigate();
    useEffect(() => {
        getUserDetails()
        .then(({ data }) => {
          console.log(data);
          setUser(data);
          setGuilds(data);
          
          setLoading(false);
          return getGuilds();
        }).then(({data}) => {

          console.log(data);
          setGuilds(data);
          

        }).catch((err) => {
            setLoading(false);
        });
    }, [])

    return !loading && (
        <div>
          <h1>Menu Page</h1>
          <MenuComponent guilds={ guilds }/>
          
        </div>
    )
}

I would really appreciate any help because I've been trying to fix this for hours!

Answer 1

 import React from 'react';
    import { Link } from "react-router-dom";
    
    
    
    export function MenuComponent( {
      guilds,
    }) {
        
        
    
        return (
            <div>
              {
                guilds && guilds.map((guild) => (
                    <div>
                       <li>{ guild.name }</li>
                       <Link to= { `/dashboard/${guild.id}` }>View Dashboard</Link>
                    </div>
                ))
              }
            </div>
        );
    }

Can you try this