how to set <SimpleFormIterator> to show one row initially at page first load

Question

As shown above, it only shows add button at first time page load, if user click submit button it will pass the validation because there is no input field to validate and then goes reach the API, because the system requires at least one record exists, I need to show one row initially. is there any props, setting or means to achieve that.

ref: https://marmelab.com/react-admin/SimpleFormIterator.html

Answer 1

SimpleFormIterator is meant to be used as an iterator of a parent input, such as the ArrayInput.

Then you should set the defaultValue of the parent input to have a record on mount.

const backlinksDefaultValue = [
    {
        date: '2012-08-22T00:00:00.000Z',
        url: 'https://foo.bar.com/lorem/ipsum',
    },
];

<ArrayInput
    source="backlinks"
    defaultValue={backlinksDefaultValue}
>
    <SimpleFormIterator>
        <DateInput source="date" />
        <TextInput source="url" />
    </SimpleFormIterator>
</ArrayInput>

You can check the usage of the ArrayInput in combination with the SimpleFormIterator in the simple project demo: https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple?file=README.md