Nested Fields functionality #2
Description
Is there a way to use nested fields?
An example would be an array of fields that nests under a common key.
import React, { Component } from 'react';
import { Input, Button } from 'antd';
import { Form, FormStore } from '@react-hero/form'
export default class MyComponent extends Component {
constructor( props ) {
super( props );
this.store = new FormStore();
this.store.set( 'filters', [{ name: undefined }], false );
}
render() {
const { filters = [] } = this.store.get();
console.log( this.store.get() );
const fields = filters.map((_, index ) => (
<Form.Field key={`filter-${index}`} label="Name" name={`filters[${index}]name`}>
<Input />
</Form.Field>
));
return (
<Form store={this.store}>
{fields}
<Button onClick={() => console.log( this.store.get() )}>Log FormStore</Button>
</Form>
);
}
}
In the above example, I've created an array with 1 object inside and set it to the filters key.
By setting the name to use the index of the filters themselves, I could essentially link it to the correct field.
However in practise it just make a new key called "filters[0]name" which I suppose is expected.
Just wondering if this Form is capable of nested fields and I'm doing it wrong or perhaps this may be a feature request.