hope someone know's the issue. I have an Array like:
let fields = [
{ name: 'email', type: 'email', placeholder: 'Email', component: FeedbackInput },
{ name: 'password', type: 'password', placeholder: 'Passwort', component: FeedbackInput }
];
And i want to render it within my redux form via:
<form onSubmit={ handleSubmit(this.props.startAnimation.bind(this, 'animatedBtnConfig')) }>
<fieldset>
{ fields.map(field => <Field key={_.uniqueId('field_')} { ...field } component={ FeedbackInput } />) }
</fieldset>
<fieldset className="center">
<AnimatedButtonRedux />
</fieldset>
</form>
So the problem is that the form is initial valid and i can enter only 1 character. Then it looses the focus from the input field and have to click it again.
Same Problem when i try it with "FieldArray":
<FieldArray name="authData" component={ DynamicFields } fields={ fields } />
Dynamic Fields Component:
export default props => {
console.log("Dynamic Fields: ", props);
return (
<div>
{ props.fields.map(field => <Field key={_.uniqueId('field_')} { ...field } />) }
</div>
);
};
Instead, when i trying it this way:
<Field { ...fields[0] } />
<Field { ...fields[1] } />
<Field { ...fields[2] } />
It work's well.
I can't see any difference in the devtool's when i look at the DOM. Why does redux form behave's this way? I can't figure it out. I would really appreciate it, when someone could give me the crucial tipp to solve this issue!