From 5652d0222d348f661bfbca169d3e46932804b0a0 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Sun, 18 Jan 2026 02:35:04 +0000
Subject: [PATCH] Render loop containers with props

---
 src/lib/json-ui/renderer.tsx | 45 +++++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/lib/json-ui/renderer.tsx b/src/lib/json-ui/renderer.tsx
index 53138e3..9822548 100644
--- a/src/lib/json-ui/renderer.tsx
+++ b/src/lib/json-ui/renderer.tsx
@@ -59,6 +59,13 @@ export function JSONUIRenderer({
 
   if (component.loop) {
     const items = resolveDataBinding(component.loop.source, dataMap, context) || []
+    const Component = getUIComponent(component.type)
+
+    if (!Component) {
+      console.warn(`Component type "${component.type}" not found in registry`)
+      return null
+    }
+
     return (
       <>
         {items.map((item: any, index: number) => {
@@ -67,9 +74,45 @@ export function JSONUIRenderer({
             [component.loop!.itemVar]: item,
             ...(component.loop!.indexVar ? { [component.loop!.indexVar]: index } : {}),
           }
+          const props: Record<string, any> = { ...component.props }
+
+          if (component.dataBinding) {
+            const boundData = resolveDataBinding(component.dataBinding, dataMap, loopContext)
+            if (boundData !== undefined) {
+              props.value = boundData
+              props.data = boundData
+            }
+          }
+
+          if (component.events) {
+            Object.entries(component.events).forEach(([eventName, handler]) => {
+              props[eventName] = (event?: any) => {
+                if (onAction) {
+                  const eventHandler = typeof handler === 'string' 
+                    ? { action: handler } as EventHandler
+                    : handler as EventHandler
+                  onAction(eventHandler, event)
+                }
+              }
+            })
+          }
+
+          if (component.className) {
+            props.className = cn(props.className, component.className)
+          }
+
+          if (component.style) {
+            props.style = { ...props.style, ...component.style }
+          }
           return (
             <React.Fragment key={`${component.id}-${index}`}>
-              {renderChildren(component.children, loopContext)}
+              {typeof Component === 'string'
+                ? React.createElement(Component, props, renderChildren(component.children, loopContext))
+                : (
+                  <Component {...props}>
+                    {renderChildren(component.children, loopContext)}
+                  </Component>
+                )}
             </React.Fragment>
           )
         })}