` , which can conflict with certain dynamics of data binding and repetition in [Builder.io](http://Builder.io).
### Background
The `noWrap` option:
- When set to `true`, it instructs [Builder.io](http://Builder.io) not to wrap the custom component in a `
`.
- This is typically used to avoid unnecessary DOM elements, but it can interfere with how [Builder.io](http://Builder.io) manages bindings and contexts, especially in repeatable structures.
### Analysis
Based on your description:
- **Behavior with** `noWrap: true` **:** Inputs bound to repeated data items do not receive values.
- **Behavior without** `noWrap` **or with an additional wrapper:** Inputs receive values correctly.
### Conclusion
While this might not strictly be a bug, it is likely a limitation stemming from how the `noWrap` option interacts with [Builder.io](http://Builder.io)’s data binding and repetition mechanisms.
### Solution
A workaround, as you’ve identified, is to use a wrapper (like a `Box` component) around your custom component when working with repetition bindings. This ensures that [Builder.io](http://Builder.io) properly maintains the binding context.
### Example Solutions:
Here are your options based on the scenario described:
#### Option 1: Remove `noWrap: true`
Consider removing the `noWrap` option if it’s not strictly necessary, allowing [Builder.io](http://Builder.io) to manage the wrapping element itself.
#### Option 2: Use a Wrapper Component
Use a wrapper component, such as a `Box` , to encapsulate the data-binding logic properly:
```javascript
// Example without noWrap
Builder.registerComponent(Footer, {
name: 'Footer',
inputs: [
// Your input definitions here
],
});
// Usage in the Builder Visual Editor
```
If you need to keep `noWrap: true`, wrap your custom component in a Box:
```auto
javascript
// Example with wrapped component
Builder.registerComponent(FooterWrapper, {
name: 'FooterWrapper',
inputs: [
{
name: 'items',
type: 'list',
subFields: [
{
name: 'item',
type: 'reference',
model: 'asset',
options: {
enrich: true,
includeRefs: true,
}
}
]
}
],
});
const FooterWrapper = ({ items }) => (
{items.map((item, index) => ())}
);
```
#### Option 3: Use Binding and Data Mapping within Component
If wrapping is not desirable, handle data mapping inside the component:
```javascriptconst Footer = ({ items }) =\> { return (
{items && items.map((item, index) =\> (
{/\* Custom rendering logic \*/} ![{item.cardIcon.data.name}]()
))}
);};
// Register component with noWrap if necessaryBuilder.registerComponent(Footer, { name: 'Footer', inputs: [{ name: 'items', type: 'list' }, // Other inputs here], noWrap: true,}); ```
### Steps to Verify
1. **Inspect Props:** Ensure that props are being passed correctly to your custom component by logging them.
2. **Check Bindings:** Verify bindings in the builder interface. Ensure that the data structure matches your expectations.
### Conclusion
While the `noWrap` feature can be useful, it may cause issues with complex data binding scenarios. Using a wrapper element generally provides a robust solution to maintain binding integrity, while still achieving the desired component functionality.
For further exploration or to report this as an issue, you can reach out to [Builder.io Support](https://www.builder.io/c/docs/help-and-support) or check the [documentation](https://www.builder.io/c/docs/custom-components-setup) to see if there have been updates related to the handling of `noWrap` in such contexts.
---
### Author:  [@nghia.vi](https://forum.builder.io/u/nghia.vi)
#### Post date: [July 2, 2024, 3:48pm UTC](https://forum.builder.io/t/data-binding-not-working-if-repeated-for-each-is-used-with-nowrap-set-to-true/5804/4 "2024-07-02T15:48:38Z")
Thank you for your insightful reply. I’m using `noWrap: true` because it makes styling my component from Visual Editor much better. I understand now this is not really a bug with Builder and I will keep an eye on the documentation to see if there is any update in the future about this issue. For now wrapping my component inside a Box is good enough.