[QUESTION] How can I render a single (nested) formio component inside a custom component?

[cesosag]

I'm trying to create a custom component that can render rows of other components (they could be anything: i.e. another custom component or an already existing formio component). But I haven't found a way to use formio to render a component from the form definition that comes in the components array. Let's say we have the following form definition that comes from a json response:

{
  components: [
    {
      type: 'customDatagrid',
      key: 'timeInAndTimeOut',
      id: 'timeInAndTimeOut',
      label: 'Time in and time out',
      defaultValue: '',
      disabled: false,
      persistent: true,
      placeholder: 'Time in and time out',
      validateOn: 'change',
      tableView: false,
      displayAsTable: false,
      rowDrafts: false,
      validate: {
        required: false
      },
      components: [
        {
          type: 'time',
          key: 'timeIn',
          id: 'timeIn',
          label: 'Time in',
          defaultValue: '',
          disabled: false,
          persistent: true,
          placeholder: 'Time in',
          validateOn: 'change',
          validate: {
            required: false
          }
        },
        {
          type: 'time',
          key: 'timeOut',
          id: 'timeOut',
          label: 'Time out',
          defaultValue: '',
          disabled: false,
          persistent: true,
          placeholder: 'Time out',
          validateOn: 'change',
          validate: {
            required: false
          }
        }
      ]
    },
  ],
  links: {},
  totalComponents: 1
};

The custom datagrid component should be able to iterate through the components array and render whatever nested component is there. Something like this:

const CustomDatagrid = ({ component, values }) => {
  // This first would render the rows according to the values already present
  return values.map(value => {
    // And this would render the columns according to the number of nested components present in the form definition
    return component.components.map(component => {
      // Some react component that renders the formio component from the form definition provided
      return <FormioComponent componentDefinition={component} />
    })
  })

The question would be: how would that FormioComponent render from the componentDefinition object that would look like the following object?

{
  type: 'time',
  key: 'timeIn',
  id: 'timeIn',
  label: 'Time in',
  defaultValue: '',
  disabled: false,
  persistent: true,
  placeholder: 'Time in',
  validateOn: 'change',
  validate: {
    required: false
  }
}