Creating custom nested component - adding children

[LukacTomas]

Hi,

I would like to create custom nested component. But not sure how to proceed in this case.

I wanted to go with writing similar class as https://github.com/formio/react/blob/master/src/components/ReactComponent.jsx that wound extend Formio.Components.components.nested.

Something like

import { Formio } from '@formio/js';

const Nested = Formio.Components.components.nested;

export abstract class NestedReactComponent extends Nested {
  ...
    abstract attachReact(element:, ref); 
}

And I would implement all the methods needed as in ReactComponent.

Then I would like to extend this base class for every custom nested component needed. And this is sort of working. I cannot actually add the (nested) children to the created custom component. I can see that i have this.components in the base class, but I don't how to add them as children to the element overridden attachReact method.

[brendanbond]

Hi @LukacTomas, thanks for reaching out. Is the goal here to create a custom component in your forms, or to use JSX to write Form.io components?

[LukacTomas]

Well, I already can use JSX to write custom Form.io components. I have my own wrapper for Form.io ReactComponent and there I can use JSX to display my custom components. Maybe the problem with ReactComponent is that it extends Field.

I would like to use my own JSX component and somehow tell that component what components should it have.

Let's say I have:

   {
      "key": "MyCustomNesteReactComponent",
      "type": "panel",
      "label": "Custom Nested React Componenet",
      "input": false,
      "tableView": false,
      "components": [
        {
          "label": "Text Field",
          "placeholder": "Text",
          "applyMaskOn": "change",
          "tableView": true,
          "key": "textField",
          "type": "textfield",
          "input": true
        }
      ]
    }

So in the end, MyCustomNesteReactComponent should be JSX component and I would like to tell it that it should have some children, in this case the textField (or whatever components I want).

[brendanbond]

1. The formio.js renderer takes a JSON form definition and ultimately renders an HTML DOM tree to be displayed by the browser.
2. The ReactComponent React component ostensibly allows you to write a form component - things like business logic, state, and some display concerns - in React, and then to "attach" a small React instance to a Form.io component instance so that when you include that component type in a form JSON definition, it will actually instantiate a tiny little instance of React and render your component that way. If possible, I would love to see how you're using this component, because I didn't really think it got a lot of use out in the wild.
3. To configure nested components (and I'm completely spitballing here), I imagine your children prop will be another ReactComponent that consumes the child JSON and itself and renders other ReactComponent React components. I don't really think it would be possible the other way around (i.e. your ReactComponent rendering regular old formio.js children like TextField or something), although maybe seeing how you're using this component in the wild would help us come up with some ideas.