First steps with custom code components - cannot read properties of undefined (reading map)

Developer Support
1

Hey! I’m trying to use a custom sidenav component and getting “cannot read properties of undefined (reading map)” when pasting the component in the studio.

It’s a nextjs app with daisy ui installed:
this is the sidenav code:

import Image from "next/image";

interface MenuItem {
    title: string;
    items: string[];
}

interface SidenavProps {
    menuItems: MenuItem[];
    logoSrc: string;
    logoAlt: string;
    logoWidth: number;
    logoHeight: number;
}

export default function  Sidenav({ menuItems, logoSrc, logoAlt, logoWidth, logoHeight }:SidenavProps) {
    return (
        <aside className="drawer-side z-10">
            <label htmlFor="my-drawer" className="drawer-overlay"></label>
            <nav className="flex min-h-screen w-72 flex-col gap-2 overflow-y-auto bg-primary px-6 py-1">
                <div className="mx-4 flex items-center gap-2 font-black">
                    <Image
                        src={logoSrc}
                        alt={logoAlt}
                        width={logoWidth}
                        height={logoHeight}
                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    />
                </div>
                <ul className="menu text-base-100">
                    {menuItems.map((menu, index) => (
                        <li key={index} className="pt-2">
                            <details>
                                <summary>
                                    {/* SVG icon can be added here */}
                                    {menu.title}
                                </summary>
                                <ul>
                                    {menu.items.map((item, itemIndex) => (
                                        <li key={itemIndex}><a>{item}</a></li>
                                    ))}
                                </ul>
                            </details>
                        </li>
                    ))}
                </ul>
            </nav>
    </aside>
    );
};

this is the registration code:

import * as React from 'react';
import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/react-web/lib/host';
import  Sidenav from '../components/Sidenav';

registerComponent(Sidenav, {
  name: 'Sidenav',

  props: {
    menuItems: {
      type: 'array',
      // Additional metadata for menuItems can be specified here
    },
    logoSrc: 'string',
    logoAlt: 'string',
    logoWidth: 'number',
    logoHeight: 'number'
  },
  importPath: './path/to/Sidenav' // Adjust the import path based on your project structure
});

export default function PlasmicHost() {
  return <PlasmicCanvasHost />;
}

Any suggestions, what am I missing regarding map?

2

Hi, I believe you are missing a defaultValue for your menuItems, you can set it with defaultValue: [], you can see an example in https://github.com/plasmicapp/plasmic/blob/23cc436ef28db7b5abc5adfc541a11f23f6b89ff/plasmicpkgs/antd5/src/registerSelect.tsx#L100