passing function to ControlArray's component

[besLisbeth]

Passing function to ControlArray component property causes double render with an extra fields` registration in the form.

Example:

<ControlArray
     name={props.name}
     component={(props) => <Component {...props}/>}
/>

Also the errors:

 Field testName[0] can't be registred. Check name hierarchy. Error: Field with name testName[0] already exist in Form.
 at Form.webpackJsonp.6OWy.Form.registerField (Form.js:78)
 at executeAction (mobx.module.js:911)
 at Form.res (mobx.module.js:902)
 at Control.webpackJsonp.JIUF.Control.createField (Control.js:85)
 at Control.webpackJsonp.JIUF.Control.componentWillMount (Control.js:74)
 at Control.f [as componentWillMount] (index.module.js:648)
 at callComponentWillMount (react-dom.development.js:6370)
 at mountClassInstance (react-dom.development.js:6435)
 at updateClassComponent (react-dom.development.js:7840)
 at beginWork (react-dom.development.js:8225)

With component={Component} no errors occured.

[vict-shevchenko]

So. The reason for multiple render is that (props) => <Component {...props}/> always creates a new function as parent component rerenders. That causes ContolArray to replace the inner component with a new instance on the same component.

When you do a component replacement check react docs bullet number 4.

So just use component={Component} - this is safe and correct way.