Repet Element Context in Plasmi Studio

I am writing a Code Component that receives an array, and that array is iterated through a “map.” Within the repeated content, a “slot” is rendered, with the intention that in Plasmic Studio, any design can be inserted into that slot and it will be repeated. However, it is necessary for the slot to access the “item” information, meaning the current element being iterated. How can I make this information appear in Plasmic Studio so that my team can see the information and use it in their slot?

I believe there is very little documentation on this topic, or at least it is not very clear from what I could read.

This is my component code:

export const AdvancedTableColumn = ({
  data,
  title,
  cellContent,
}: AdvancedTableColumnProps) => {

  return (
    <div style={mainContainerStyle}>
      <div className="th" style={headerStyle}>
        <span>{title}</span>
      </div>

      {data.map((item, i) => (
        <div className="cell" style={cellStyle}>
            {cellContent}
        </div>
      ))}
    </div>
  );
};

And this the registrarion of the component:

export const advancedTableColumnMeta: CodeComponentMeta<AdvancedTableColumnProps> = {
  name: "AdvancedTableColumn",
  displayName: "Advanced Table Column",
  props: {
    title: {
      type: "string",
      defaultValue: "Column Title",
    },
    data: {
      type: "array",
      defaultValue: [],
    },
    cellContent: {
      type: "slot",
    },
  },
  importPath: "inprodi-design-system",
  importName: "AdvancedTableColumn",
};

Hello @andres_murillo,

can you try using repeatedElement from react-web/lib/host? Here are the docs for it Writing code components for use with Plasmic | Learn Plasmic

{data.map((item, i) => (
  repeatedElement(i, cellContent)
))}

I have done that before. I’m importing like this:

import { repeatedElement } from "@plasmicapp/loader-nextjs";

Since I am using loader method in NextJs.

And my code looks like this:

    return (
        <div className="wrapper">
            <div style={mainContainerStyle} className={className}>
                <div className="th" style={headerStyle}>
                    <span style={titleStyle}>{title}</span>
                    <Splitter dir="horizontal" isDragging={isDragging} {...separatorProps} />
                </div>

                { data.map((item, i) => (
                    repeatedElement( i,
                        <div className="cell" style={cellStyle} key={i}>
                            {cellContent}
                            {console.log(item)}
                        </div>
                    )))}
            </div>
        </div>
    );

But in plasmic studio I dont see the element info:

How im a suppose to acces that info?

Oh, sorry. I didn’t understand the question properly the first time.

For accessing the info, please specify that your component provides data with the providesData: true prop in registration and wrap it in a DataProvider component:

  {
    data.map((item, i) => (
      <DataProvider key={item.id} name={item.name} data={item}>
        repeatedElement( i,
        <div className="cell" style="{cellStyle}" key="{i}">
          {cellContent} {console.log(item)}
        </div>
        )
      </DataProvider>
    ));
  }

I already carried out the implementation as you told me.

I still cannot view the information from plasma studio :frowning:

Can you send the registration and the component code again?

Importation:

import { DataProvider, repeatedElement } from "@plasmicapp/loader-nextjs";

Component Code:

<div style={mainContainerStyle}>
    <div className="th" style={headerStyle}>
        <span style={titleStyle}>{title}</span>
    </div>

    { data.map((item, i) => (
        <DataProvider key={i} name="repeater" data={item}>
            { repeatedElement( i,
                <div className="cell" style={cellStyle} key={i}>
                    {cellContent}
                    {console.log(item)}
                </div>
            )}
        </DataProvider>
    ))}

</div>

Registration:


export const advancedTableColumnMeta: CodeComponentMeta<AdvancedTableColumnProps> = {
    name: "AdvancedTableColumn",
    displayName: "Advanced Table Column",
    providesData: true,
    props: {
        title: {
            type: "string",
            defaultValue: "Column Title",
        },
        data: {
            type: "array",
            defaultValue: [],
        },
        size: {
            type: "choice",
            options: ["small", "medium", "large"],
            defaultValue: "medium",
        },
        align : {
            type: "choice",
            options: ["left", "center", "right"],
            defaultValue: "left",
        },
        initialWidth: {
            type: "string",
            defaultValue: "200px",
        },
        minWidth : {
            type : "string",
            defaultValue : "100px",
        },
        maxWidth : {
            type : "string",
            defaultValue : "500px",
        },
        cellContent: {
            type: "slot",
        },
    },
    importPath: "inprodi-design-system",
    importName: "AdvancedTableColumn",
};

Apologies!

I already managed it, the solution you gave is correct, but I had an error in my code. I already got it working! Thank you so much!