Overwrite breadcrumb Items

Issues
1

image
image972×392 17.9 KB

I am having issues overwriting the items props for breadcrumbs in my react app. The image shows the code for this.

import * as React from "react";
import {
  PlasmicDashboardContent,
  DefaultDashboardContentProps
} from "./plasmic/map_map/PlasmicDashboardContent";
import { HTMLElementRefOf } from "@plasmicapp/react-web";
import { AntdBreadcrumbItem } from "@plasmicpkgs/antd5/skinny/registerBreadcrumb"

export interface DashboardContentProps extends DefaultDashboardContentProps {}

function DashboardContent_(
  props: DashboardContentProps,
  ref: HTMLElementRefOf<"div">
) {

  const folders = ['Folder 1', 'Folder 2']

  return <PlasmicDashboardContent
    
    folderBreadcrumbs={{
      style: {
        color: 'white'
      },
      //@ts-ignore
      items: folders.map((folder, index) => <AntdBreadcrumbItem style={{color: 'red'}}>{ folder }</AntdBreadcrumbItem>)
    }}
    root={{ ref }}
    {...props}
  />;
}

const DashboardContent = React.forwardRef(DashboardContent_);
export default DashboardContent;

Above is my code that shows how I am trying to overwrite the breadcrumb items. After running this code, I still see the default breadcrumb items from my plasmic studio.

2

Hello @devs_hub-hub.

Can you link the project ID that this is happening?
My guess is that you’re missing the props field:

folderBreadcrumbs= {{
  props: {
    items: ...
  },
}}
3

Hi Icaro,

when exactly does one need to wraps props with:

props: {
     propName: ...    
  },

I have done this when I started using Plasmic. then I was told - and I realized - that this was not necessary.

Anyway - this suggestion does not work

The problem is that nothing that is passed inside of items will be displayed
instead, we see the breadcrumb items that were set in plasmic studio
image

4

Please send your project id.

5

This is the project id
bZkmRHqpZgGUTSLe9r3ZuT

6

Hello,

Can you try using the prop itemsRaw instead of items?

1 Like
7

This worked. Thank you.

8

I don’t know about this …Raw and …Render.
Where can I learn more?

9

Hello @johannes_horteis.

This is something specific that we did for a better experience. You can see the implementation here.

1 Like