I need to create a component that will render multiple node containers inside. How can I do that?

[tuthanhoancanh012]

I want to create a component with four node containers inside, but I couldn't find any specific examples on websites. I have the configuration code below, but it always renders only one node container. I want to initialize it with four containers, as in the example. Is there any way to achieve this?

const myContainerList = define(({children})=>{ // Display initialized with 4 containers return <div>{children}</div> },'MyContainer') .name('Container') .props({children: nodeArray})

[optimajet]

If you need four containers that you want to display in different parts of the component, you can describe four properties. I think the example will make it clear:

import {define, node, nodeArray, useBuilderContext} from '@react-form-builder/core'
import type {ReactNode} from 'react'

interface FourProps {
  one?: ReactNode
  two?: ReactNode[]
  three?: ReactNode
  four?: ReactNode
}

const Four = (props: FourProps) => {
  const context = useBuilderContext()

  // You can show different components in builder and view modes
  const two = context.builderMode === 'builder'
    ? props.two
    : props.two && props.two.length && props.two[0]

  return <div>
    <div>
      <h1>One</h1>
      {props.one}
    </div>
    <div>
      <h1>Two</h1>
      {two}
    </div>
    <div>
      <h1>Three</h1>
      {props.three}
    </div>
    <div>
      <h1>Four</h1>
      {props.four}
    </div>
  </div>
}

export const fourComponent = define(Four, 'Four')
  .name('Four')
  .props({
    one: node, // ReactNode instance will be passed to the component
    two: nodeArray, // ReactNode array will be passed to the component
    three: node,
    four: node,
  })

[tuthanhoancanh012]

The goal is to dynamically input the number of containers I need to render in the component. If I enter 4, it should render 4 containers. When I update the input from 4 to 5, it should render 5 containers.

[optimajet]

const builderView = new BuilderView([
    CustomContainer({ formData }).build(),
    ...components,
  ]);

The component metadata is created when the build function is called (https://formengine.io/documentation/api-reference/@react-form-builder/core/classes/Definer#build). That is, the metadata is static.

Currently, FormEngine displays dropzones if the component has a property of type node or nodeArray defined and this property has no children. Both the node annotated property and the nodeArray property can be dragged and dropped into multiple components.

That is, the number of dropzones depends on the number of properties in the component that are annotated by node or nodeArray.

[tuthanhoancanh012]

Is there a way for me to add an additional node container into a previously defined component? My example below doesn’t work because the node is only created during the initial render, and when I update it, the node container is not re-created.

const ContainerList = ({ nodeNumber, ...rest }) => {
  return <div>{Array.from({ length: nodeNumber })?.map((number) => rest[`node${number}`])}</div>;
};

const CustomContainer = ({ nodeNumber }: { nodeNumber: number }) => {
  const nodes = Array.from({ length: nodeNumber }).reduce(
    (result, number) => {
      result[number] = node.named(`node${number}`);
      return result;
    },
    {} as Record<string, NodeAnnotationBuilder<React.ReactNode>>
  );

  return define(ContainerList, `myContainerList`)
    .name('My Container List')
    .props({
      nodeNumber: number.default(3).named('rows'),
      ...nodes,
    });
};

const App = () => {
  const [nodeNumber, setNodeNumber] = useState(5);
  return (
    <div>
      <button onClick={() => setNodeNumber((nodeNumber) => nodeNumber + 1)}>Add Node</button>
      <FormBuilder view={new BuilderView([CustomContainer({ nodeNumber }).build()])} />
    </div>
  );
};

[optimajet]

Now apparently there is no other way to do this than to add a separate container view, which requires some modification to the source code.

Could you please describe the problem you are solving in more detail, maybe it is a typical enough problem and we will implement this functionality.

[tuthanhoancanh012]

Thank you so much. I want to build a dynamic container that displays as a nodeArray. For example, when I drag a custom node container into the form builder, I want to be able to add or remove node containers within that form builder. Currently, I have only implemented the delete functionality. However, I have not yet been able to implement adding a new node to an existing custom component in form builder.