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

Issue

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

Solution

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

Answered By - WiXSL
Answer Checked By - - Pedro (ReactFix Volunteer)