React-redux-form: getFieldFromState error when using Field

[cyberwombat]

I am getting this error

 Warning: Unknown prop `getFieldFromState` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Field)

My form is simple:

<Form model='form.subscriber'>
  <Field model='form.subscriber.email'>
    <input type='text' />
  </Field>
</Form>

If I switch to Control the it works. I have read some posts that Immutables can cause problems - I am using redux-immutable but I think I have eliminated its intrusion on the forms:

import { combineReducers } from 'redux'
import { combineReducers as combineReducersImmutable } from 'redux-immutable'
import { combineForms } from 'react-redux-form'

export default function createReducer (asyncReducers) {
  const ir = combineReducersImmutable({ routing, ...asyncReducers })
  const rr = combineReducers({form: combineForms({
    subscriber: { email: '[email protected]'}
  }, 'form')})
  return combineReducers({ir, rr })
}

I have also tried using:

import { Field, Control, Form, Errors } from 'react-redux-form/lib/immutable'

I am on 1.0.10. I may not have gotten this error on 1.0.9 but I am not sure as I was dealing with the Cannot read property '$form' of null error that was addressed in the last release. This form was carried as is from another repo that had 1.0.9 and was working so it's hard to say - not sure why I didn't experience the $form bug then. The only changes I see are the reducers but...

This is the repo I am working with. I have not done much changes except add the form and modify the reducer accordingly.

[davidkpiano]

This is a known issue - will resolve it by tomorrow!

[erin-doyle]

Also, in 1.0.10 you _should_ now be able to use redux-immutable without issue and create your form reducer like so (_NOTE the importing from react-redux-form/lib/immutable_):

import { combineReducers } from 'redux-immutable'
import { createForms } from 'react-redux-form/lib/immutable'

export default function createReducer (asyncReducers) {
  return combineReducers({ 
    routing, ...asyncReducers,
    ...createForms({
        subscriber: { email: '[email protected]'}
    }) 
  });

createForms() will prevent the need for deep nesting in a form object but if you prefer that you can still use combineForms like so:

import { combineReducers } from 'redux-immutable'
import { combineForms } from 'react-redux-form/lib/immutable'

export default function createReducer (asyncReducers) {
  return combineReducers({ 
    routing, ...asyncReducers,
    form: combineForms({
      subscriber: { email: '[email protected]'}
    }, 'form') 
  });

[cyberwombat]

I tried using createForm with immutables but I get an error when I add the Error component:

TypeError: Cannot read property '$form' of null
    at mapStateToProps (/Server/node_modules/react-redux-form/lib/components/errors-component.js:246:50)
    at Connect.configureFinalMapState (/Server/node_modules/react-redux/lib/components/connect.js:154:27)
    at Connect.computeStateProps (/Server/node_modules/react-redux/lib/components/connect.js:141:23)
    at Connect.updateStatePropsIfNeeded (/Server/node_modules/react-redux/lib/components/connect.js:203:35)
    at Connect.render (/Server/node_modules/react-redux/lib/components/connect.js:338:40)
    at /Server/node_modules/react/lib/ReactCompositeComponent.js:793:21
    at measureLifeCyclePerf (/Server/node_modules/react/lib/ReactCompositeComponent.js:74:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (/Server/node_modules/react/lib/ReactCompositeComponent.js:792:27)
    at ReactCompositeComponentWrapper._renderValidatedComponent (/Server/node_modules/react/lib/ReactCompositeComponent.js:819:34)
    at ReactCompositeComponentWrapper.performInitialMount (/Server/node_modules/react/lib/ReactCompositeComponent.js:361:30)

Form:

import React, { Component } from 'react'
import { Control, Form, Errors, actions } from 'react-redux-form'
import { connect } from 'react-redux'
import axios from 'axios'

const isRequired = (val) => val && val.length > 0

class SubscriptionForm extends Component {

  constructor (props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  handleSubmit (data) {
    const { dispatch, sourceRequest } = this.props

    const { protocol, host } = sourceRequest
    const somePromise = axios.post(`${protocol}://${host}/api/v0/newsletter/subscribe`, data)

    dispatch(actions.submit('subscriber', somePromise))
  }

  render () {
    const { form } = this.props
    let submitted = form.$form.submitted
    return (
      <Form model='subscriber' onSubmit={this.handleSubmit}>

        <Control.text model='subscriber.email' validators={{ isRequired }} />
        <Errors
          wrapper='span'
          show={{ touched: true, focus: false }}
          model='subscriber.email'
          messages={{ isRequired: 'Please provide a valid email.' }} />

        <button type='submit'>
          Finish registration!
        </button>
      </Form>

    )
  }
}
const mapStateToProps = (state) => {
  return {
    sourceRequest: state.sourceRequest,
    form: state.get('forms').subscriber

  }
}

export default connect(mapStateToProps)(SubscriptionForm)

I am not sure I am properly accessing the form in my mapStateToProps. I sometimes get a form.$form is undefined in render (yet I can console log it which I am not clear why).

Reducers:

 export default function createReducer (asyncReducers) {
   return combineReducers({
     sourceRequest,
     ...asyncReducers,
     ...createForms({
       subscriber: { email: '[email protected]'}
     })
   })

[cyberwombat]

Also getting errors when I add the validators={{ isRequired }}

undefined is not an object (evaluating 'state.$form.model')

Not sure if it's me not setting the form correctly or if it's part of this bug as well.

[zachall]

I'm also getting the same error as @cyberwombat:

warning.js:36 Warning: Unknown prop 'getFieldFromState' on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

Switching to Controls works, but using Control.Select doesn't work for me for some reason.

Also, the same error occurs in the Validation Example at https://github.com/davidkpiano/react-redux-form/tree/master/examples/validation

[erin-doyle]

My bad, I left out of my example and did not make clear that you need to be importing all of these things from react-redux-form/lib/immutable if you're using redux-immutable. Take a look at the Immutable example for more details.

As for the warning:

warning.js:36 Warning: Unknown prop 'getFieldFromState' on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

I'll repeat what @davidkpiano said:

This is a known issue - will resolve it by tomorrow!

So it's in the works! ;)

[davidkpiano]

will resolve it by tomorrow!

By tomorrow I mean as soon as I can; currently at a conference! 😄

[cyberwombat]

I am still getting errors on 1.0.11 using Immutables. This happens if I use a validator in Field or an Error component. I have imported from react-redux-form/lib/immutable in all cases. Not sure what I am missing?

Error:

TypeError: undefined is not an object (evaluating 'form.$form.model') — get-field-from-state.js:39 (index.js, line 20290)
TypeError: null is not an object (evaluating 'internalInstanceKey')  getClosestInstanceFromNode (i ndex.js:1155)

Form:

import React, { Component } from 'react'
import { Field, Control, Form, Errors, actions } from 'react-redux-form/lib/immutable'

const isRequired = (val) => val && val.length > 0

class SubscribeForm extends Component {

  render () {
    return (
      <Form model='forms.subscribe' onSubmit={this.handleSubmit}>
        <Field model='forms.subscribe.email' validators={{ isRequired}}>
          <label> Email address: </label>
          <input type='text' placeholder='Your email address' />
          <Errors
            wrapper='span'
            show={{ touched: true, focus: false }}
            model='forms.subscribe.email'
            messages={{ isRequired: 'Please provide a valid email.' }} />
        </Field>
        <button type='submit'>
          Finish registration!
        </button>
      </Form>

    )
  }
}

Note that I have tried forms.subscribe.email as well as subscribe.email and other variation as well.

Reducer:

import { combineForms, createForms } from 'react-redux-form/lib/immutable'

 export default function createReducer (asyncReducers) {
   return combineReducers({
     sourceRequest,
     ...asyncReducers,
     ...createForms({
       subscribe: { email: '[email protected]'},
       unsubscriber: {}
     })
   })
  }

[davidkpiano]

@cyberwombat

TypeError: undefined is not an object (evaluating 'form.$form.model')

The default base path for createForms is under 'forms', not 'form'. Maybe that's the issue?

[cyberwombat]

I tried that. I tried the examples with same result. If I add 'forms.subscribe' to model then the error is

[Log] TypeError: undefined is not an object (evaluating 'state.$form.model') — update-field.js:49 (index.js, line 20290)

which is the same that the example gives.

[erin-doyle]

It looks to me like the model for your Field component should be subscribe.emailnot form.subscribe.email. If the Form model is subscribe then the Field model is a child of that, thus subscribe.email.

[cyberwombat]

@erin-doyle Sorry that was a bit of a typo from my part. as David indicated createforms creates a deep object under forms I have tried that. So forms.subscribe.email. However that doesn't prepopulate the form so it appears that subscribe.email is it. However I cannot use either a validator or the Error component without errors.

[erin-doyle]

So you've changed your Form model to 'subscribe', your Field model to 'subscribe.email' and your Errors model to 'subscribe.email' and you're still receiving errors? Can you give us an updated state of your code and the errors you're getting?

[cyberwombat]

So this "may" be fixed. I gave up on immutables with forms so took that off but still had errors when using createForm (mostly a stack overflow issue). I upgraded from .11 to .12 and that took care of it. So... My forms now work w/o immutables - I can't say if the issue I had is still there - I assume it was part of the same issue.

[davidkpiano]

@cyberwombat Thanks for checking! I'll close this and we can revisit it _if_ the issue reappears with immutable forms. I'm fairly certain it should be fixed, though.