How can I override such a component from the editor

[Yusipower]

I want to create a component with the same dom structure in the editor…How can I pass the same data to the elements as in the primer?

<ul className={styles.products}>
          {products.map(product => {
            return (
              <li key={product.id}>
                <Link href={`/products/${product.id}`}>
                  <a>
                    <div className={styles.productImage}>
                      <img width="864" height="1200" src={product.image} alt={product.title} />
                    </div>
                    <h3 className={styles.productTitle}>
                      { product.title }
                    </h3>
                    <p className={styles.price}>
                      ${ product.price }
                    </p>
                  </a>
                </Link>
                <p>
                  <Button>Add to Cart</Button>
                </p>
              </li>
            )
          })}
        </ul>

[TimG]

Hi @RomanP welcome to the Forum!

Could you provide more context on what you are trying to achieve? Are you looking to create a custom react component based on the structure above?

If so you could probably achieve with something like this:

import { Builder } from "@builder.io/react";

export const CustomListComponent = (props: any) => (
  <ul>
          {props.products.map((product: any) => {
            return (
              <li key={product.id}>
                <Link href={`/products/${product.id}`}>
                  <a>
                    <div >
                      <img width="864" height="1200" src={product.image} alt={product.title} />
                    </div>
                    <h3 >
                      { product.title }
                    </h3>
                    <p >
                      ${ product.price }
                    </p>
                  </a>
                </Link>
                <p>
                  <button>Add to Cart</button>
                </p>
              </li>
            )
          })}
        </ul>
);

Builder.registerComponent(CustomListComponent, {
  name: "ListComponent",
  inputs: [
    {
      name: "products",
      type: "list",
      defaultValue: [{ 
        defaultText:  'default text of this thing'
      }],
      subFields: [
        {
          name: 'id',
          type: 'string',
          defaultValue: '',
        },
        {
          name: 'image',
          type: 'file',
          defaultValue: '',
        },{
          name: 'title',
          type: 'string',
          defaultValue: '',
        },{
          name: 'price',
          type: 'string', //or number
          defaultValue: '',
        }
      ]
    }
  ]
});

Once you place the element on the page you can then select the inputs and they will populate throughout the component based on the styling, etc you have defined in the component file within your code base.

Or are you looking to pull in some data and then build the component within the Builder visual editor? If that is the case you would want to add data to your page. And then you can set up a repeat based on whatever elements you have in state within the Data tab:

let me know if either of these options answer your question! If not please provide any more context or insight that could be helpful!

[Yusipower]

Thank you very much! Basically I want to have the logic of the code that I showed earlier. And I don’t want to register a component through a codebase and have hard-coded styles. I want to redefine the logic of the native list Builder that it accepted such parameters…

[TimG]

@Yusipower I see…for this I think you would need to create a Symbol. If you want to avoid custom components, Symbols are the best way to create a ‘component’ that takes inputs.

This List Symbol would take a content input that is a list with the various values you need (ie, id, image, title, price) like so:

Then, within the symbol you could iterate over these products using a repeat in the data tab:

Then, finally just bind the value to the different inputs on the page:

It is somewhat similar to how this walkthrough is setup: Connecting dynamic data in Builder's Visual Editor just using content inputs on the symbol instead of connected data.

Now, since it is a symbol, you could drop it onto any page as if it were a component and then choose the products on the symbol and voila! IT should populate with all the appropriate data.

Hopefully that achieves what you are looking for? Try it out and let me know if that works or you have any further questions!