Creating custom nested component - adding children about react HOT 3 OPEN

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?

from react.

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).

from react.

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.

from react.