The default value of an ArrayInput doesn't work with a SimpleFormIterator

What you were expecting: I want to have a default value for an ArrayInput with a SimpleFormIterator as a child.

What happened instead: The input isn’t populated as expected and stay empty.

Steps to reproduce:

1. Have an ArrayInput with a SimpleFormIterator as a child
2. Set the prop defaultValue with a correct format

Related code:

See the first input in src/posts/PostCreate.js file within the following Code Sandbox: https://codesandbox.io/s/1wqxkv6pml

The code is the following:

<ArrayInput
    source="backlinks"
    defautltValue={[
        { date: "2012-08-09T00:00:00.000Z", url: "http://example.com/bar/baz.html" }
    ]}
>
    <SimpleFormIterator>
        <DateInput source="date" />
        <TextInput source="url" />
    </SimpleFormIterator>
</ArrayInput>

Other information: Related question on SO: https://stackoverflow.com/questions/51425225/arrayinput-how-to-set-default-value

Environment

• React-admin version: from 2.0.2 to 2.1.2 at least
• React version: 16.3.1
• Browser: Chrome

[gokberkakdeniz]

@afilp I have same problem on v3.7.2. I just want to show 4 blank inputs on load.

<ArrayInput
  variant={formProps.variant}
  source="Area"
  validate={[
    required(),
    minLength(4, "pi.customers.error.insufficientPoint"),
    firstAndLastEqual(
      "pi.customers.error.firstAndLastPointAreNotEqual"
    ),
  ]}
  // defaultValue={Array(4)}
  // defaultValue={Array(4).map(() => ({
  //   Latitude: 0,
  //   Longitude: 0,
  //   Address: "",
  // }))}
  label={translate("pi.customers.area")}
  fullWidth
>

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    in ArrayInput (at CustomerForm.js:86)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at CustomerForm.js:82)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at CustomerForm.js:25)
    in form (at CustomerForm.js:24)
    in FormView (created by ReactFinalForm)
    in ReactFinalForm (created by FormWithRedirect)
    in FormWithRedirect (at CustomerForm.js:21)
    in CustomerForm (at CustomerCreate.js:26)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by CreateView)
    in div (created by CreateView)
    in div (created by CreateView)
    in CreateView (created by Create)
    in Create (at CustomerCreate.js:21)
    in CustomerCreate (created by WithPermissions)
    in WithPermissions (created by Context.Consumer)
    in Route (created by ResourceRoutes)
    in Switch (created by ResourceRoutes)
    in ResourceRoutes (created by Resource)
    in Resource (at App.js:32)
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Context.Consumer)
    in div (created by Layout)
    in main (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Context.Consumer)
    in withRouter(WithStyles(Layout)) (created by ConnectFunction)
    in ConnectFunction (created by LayoutWithTheme)
    in ThemeProvider (created by LayoutWithTheme)
    in LayoutWithTheme (created by Context.Consumer)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by Context.Consumer)
    in Route (created by CoreAdminUI)
    in Switch (created by CoreAdminUI)
    in CoreAdminUI (created by AdminUI)
    in AdminUI (created by Admin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (created by CoreAdminContext)
    in TranslationProvider (created by CoreAdminContext)
    in Provider (created by CoreAdminContext)
    in CoreAdminContext (created by AdminContext)
    in AdminContext (created by Admin)
    in Admin (at App.js:20)
    in App (at src/index.js:14)

[afilp]

@Kmaschta @fzaninotto I also believe there is a bug here, in my case I get hundreds of re-rerenderings and the app crashes with the following errors:

Uncaught Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Note: Not sure if this is the reason, I have the ArrayInput in the return function of a Query, could this cause any problems? If I comments out the defaultValue everything works as expected, but when I include it then I get the above errors (which make the app halt).