Decorated form doesn't receive documented values instance prop

According to: http://redux-form.com/6.2.0/docs/api/ReduxForm.md/

… in the section labeled Instance API the decorated component should have access to a values property, which should be

The current values of all the fields in the form.

But, no matter what I do, I can’t get the documented values property, either in my own code, or by pulling down the simple example and modifying it.

A simple example is conditionally rendering something in the form based on the current value, which seems like exactly what the documented values object would be ideal for.

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const MyForm = ({ handleSubmit, values }) => (
  <form onSubmit={handleSubmit}>
    <div>
      <Field name="name" component="input" type="text"/>
      {values.name === 'Fred' && <b>Hi Fred!</b>} // <-- error! `values` undefined
    </div>
  </form>
);

export default reduxForm({ form: 'myForm' })(MyForm);

Or am I totally mis-understanding the documentation?

[martinhorsky]

@jaredh159 Yes, you misunderstand docs and maybe what “instance” in React world means.

You are trying to get values from prop values. But it does not exists.

values you mentioned are available from instance of decorated component. To understand that, let’s see example:

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const MyForm = ({ handleSubmit }) => (
  <form onSubmit={handleSubmit}>
    <div>
      <Field name="name" component="input" type="text"/>
    </div>
  </form>
);

export default reduxForm({ form: 'myForm' })(MyForm);

import React, { Component } from 'react'
import MyForm from './MyForm'

class MyContainer extends Component {

  componentDidMount() {
    console.log(this.form.values) // <-- here you can get values from instance of reduxForm
  }

  render() {
    <MyForm ref={ (instance) => { this.form = instance } } />
  }
}

That’s how Instance API works. You can see from example it’s designed for different usecase.

You should use what @niksajanjic suggests… formValueSelector + connect see: http://redux-form.com/6.2.0/examples/selectingFormValues/

I hope this explanation will help. 😀

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.