Generic array field with form composition

import { withForm } from '../hooks/form';

const ArrayComponent = withForm({
  props: {
    name: '',
    children: null,
    className: '',
    id: '',
  },
  render: function Render({ form, name, children, className, id }) {
    return (
      <form.AppField name={name} mode='array'>
        {(field) =>
          field.state.value.map((_, index) => (
            <div className={className} key={index} id={id}>
              {children(field, index)}
            </div>
          ))
        }
      </form.AppField>
    );
  },
});

export default ArrayComponent;

<ArrayComponent name='people'>
  {(field, index) => (
    <div key={index}>
      <field.TextField
        name={`people[${index}].name`}
        label={i18n._(msg`Name`)}
      />
    </div>
  )}
</ArrayComponent>