Thomas Milan Thomas Milan - 1 year ago 140
React JSX Question

redux-form : How to display form values on another component

I am using redux-form 6.0.0-rc.5 and I am trying to display the form values as they are entered by the user.

However, I want these values to be displayed from another component, not the redux form itself.

So, my simplified App architecture would be like that :

<App /> -> (main component -container ?-)
<List /> -> (connect to form values and pass them down)
<Elem /> -> (display form value)
<Form /> -> (enter form values)

The component is a redux-form mounted to 'form' and is working.

Form = reduxForm({
form: 'formName'

What would be a good way of getting the form values (from state form.formName.values) and send them to my Display component ?

Things I have tried :

  • Connect App to the store and mapStateToProps (form.formName.values) then pass it down to Display as a prop. But it throws an error since values does not exist in the form state until the user has typed anything.

  • Using the function getFormValues('formName') provided by redux-form inside the List component but it returns a function or undefined :


const Elem = ({ name }) => (


const List = ({ values }) => (
{ => <Elem name={} />)}

List = connect(
state => ({
values: getFormValues('formName')

There must be something I am missing or I still do not understand correctly whether it is with redux-form or redux itself... I hope someone will be able to enlighten me !

Thank you and have a great day.

Answer Source

Try using

List = connect(
  state => ({
    values: getFormValues(state.form.formName)

instead. At least that's how it worked in v5, although there the method was called getValues and not getFormValues.

Edit: After a quick look at the docs it seems in v6 you'll have to use a formValueSelector:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download