How to create a "Repeating Container"

[cederron]

Have been toying with the landing page example for a few days, I added multi page support and basic data binding to the text control,
I struggled quite a lot as I'm new to react/next/typescript/craftjs. That's a lot to learn.
Now I want to create a "repeating container" but can't really figure it out.
The idea is create a container with an array prop, inside this container you can drag a single control . Now this child control has to be rendered multiple times according to the length of the parent container array. If parent container has 10 items in its array, then child element will be rendered 10 times.
Also each element in the array should be passed to each child , so the child can render this element.

<RepeatingContainer data={['A','B','C','D']}>
   <Button>{context}</Button> 
<RepeatingContainer />

// final rendered component  should be
    <Button>A</Button>
    <Button>B</Button>
    <Button>C</Button>
    <Button>D</Button>

In Edit mode you should only see one child, so you only need to design one child, but out of edit mode the child controls should be repeating.

I copied Container control and i guess i should modify the render function, instead of:

{children}

do something like:

if(editMode){
    renderChildSomeHow(data[0]);  // in edit mode render one instance of child component, and pass some mocked data, for design purposes
}
else{
data.map( (item) => {
    renderChildSomeHow(item);  // out of edit mode, render child multiple times and pass the corresponding array item
})
}

Can't figure this out with my current knowledge of all the frameworks involved, so I'm asking for guidance.

Thanks.

[cederron]

Well, seems I have been able to pull this on my own :)
it was simpler than expected.

I modified container initialization, get editor state and inspect the children

  let child: ReactNode = null;
  if(React.Children.count(children) > 0){
    child = React.Children.only(children);
  }

  const { enabled } = useEditor((state) => ({
    enabled: state.options.enabled,
  }));

now in the render function

{
          child != null ? ( enabled ? child  : data.map((item) => child)) : <span>No child</span>
 }

Still not finished, but seems i can get there from here, now i guess i will have to fiddle with React.createElement or something to pass the array element as prop to the child component

[cederron]

Almost there , In container initialization I have

  const { enabled } = useEditor((state) => ({
    enabled: state.options.enabled,
  }));

  let clonedChildren: ReactNode[] = [];
  if(React.Children.count(children) > 0) {
    let c = React.Children.only(children);
    if(enabled && React.isValidElement(c)){
      clonedChildren.push(React.cloneElement(c, {...props, context: data[0], key: data[0]}));
    }
    else{
      data.map((element) => {
        if( React.isValidElement(c)){
          clonedChildren.push(React.cloneElement(c, {...props, context: element, key: element}));
        }
      })
    }
  }

then in render function I do

{clonedChildren}

Problem is this line:

clonedChildren.push(React.cloneElement(c, {...props, context: data[0], key: data[0]}));

Should be setting child component 'context' prop to a value, but in the 'Button' child component 'context' prop is null, so it's not working. The prop is not passing. I'm thinking maybe the prop is being passed to a higher order component used by craftjs like RenderNode ??

Any help with this ?

Thanks.

[cederron]

Resolved passing data using a context.

Thanks.

[heyjaypray]

@cederron hey! I'm having a similar issue to you - do you have a code snippet of how you were able to pass props? I'm unable to see the props from the data on the components inside the cloned children.

damn looks like a year to the date since you had this issue haha

[cederron]

@cederron hey! I'm having a similar issue to you - do you have a code snippet of how you were able to pass props? I'm unable to see the props from the data on the components inside the cloned children.

damn looks like a year to the date since you had this issue haha

yeah quite a bit of time, at that time i was a newbie with react, now i have some more understanding.

what you have to do is repeat the children the number of times required and use a react context for each child, for example:

const Repeater = ( items, children ) => {

   return (
   items.map( i => {
        return <RepeaterContextProvider data={i}>
           {children}
        </RepeaterContextProvider>
});
)
}

const Child = () => {

   const {data} = React.useContext(RepeaterContext);
    
    return(
   <span>{data}</span>
);
}

// Usage:

<Repeater items={['a', 'b', 'c']}>
    <Child />
</Repeater>

// Result will be:

<span>a</span>
<span>b</span>
<span>c</span>

it's that easy :)

[heyjaypray]

awesome! thank you so much! works perfectly!

[mixasite]

@cederron @heyjaypray
when you write this, Repeater will get Child in children prop.

<Repeater items={['a', 'b', 'c']}>
    <Child />
</Repeater>

but your original question was: "In Edit mode you should only see one child, so you only need to design one child". So, I assume what you want is having Repeater as a canvas and letting user drop things (e.g. Child) into it, which will be repated

but when you drag&drop a Repeater component and then a Child component into it, this Child will not be part of the Repeater.children prop because it is handled by CraftJS's internal state not by React/DOM when user interacts with the editor.

don't we need some cloning using CraftJS nodes similar to what's discussed here?
So, having hard time understanding how your solution works. Would appreciate some help.