redux-form: FormSection and nested Field component bug

Are you submitting a bug report or a feature request?

Bug with FormSection and nested Field

What is the current behavior?

When using FormSection with nested Field components, input names get prefix with every nested reuse.


const fieldComponent = ({input}) => {
	console.log(input.name); // as expected form1.foo
        return <Field {...input} component={nextFieldComponent} />
}

const nextFieldComponent = ({input}) => {
	console.log(input.name); // becomes form1.foo.foo
	return <input {...input} />
}

const Form = () => (
  <div>
    <FormSection name='form1'>
      <Field name='foo' component={fieldComponent} />
    </FormSection>    
  </div>
)

fiddle with alert on this: https://jsfiddle.net/86v1yuuz/2/

What is the expected behavior?

It should not append FormSection name on nested Field components

Sandbox Link

https://jsfiddle.net/86v1yuuz/2/

What’s your environment?

Redux v. 6.6.3, React 15.5.3

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 20 (17 by maintainers)

Most upvoted comments

BTW @Kestutis I think you can solve your problem as follows:

const FieldComponent = ({name}) => {
	console.log(name); // as expected foo
        return <Field name={name} component={NextFieldComponent} />
}

const NextFieldComponent = ({input}) => {
	console.log(input.name); // becomes form1.foo
	return <input {...input} />
}

const Form = () => (
  <div>
    <FormSection name='form1'>
      <FieldComponent name='foo'/>
    </FormSection>    
  </div>
)

Try to make your forms so that no matter what the structure is, the top component is the one that has @reduxForm, all intermediate components use only <FormSection> if they need to work on subtrees, and the <Field ...> components are at the bottom of your structure.

Also, React components need to be uppercase, otherwise JSX won’t recognize them as components.

wmertens on May 31, 2017