redux-form : How to display form values on another component
<p>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.</p>

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

<p>So, my simplified App architecture would be like that : </p>

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

<p>The  component is a redux-form mounted to 'form' and is working.</p>

<pre><code>Form = reduxForm({
  form: 'formName'
})(Form)
</code></pre>

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

<p>Things I have tried :</p>

<ul>
<li><p>Connect <strong>App</strong> to the store and <em>mapStateToProps</em> (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.</p></li>
<li><p>Using the function <strong>getFormValues</strong>('formName') provided by redux-form inside the List component but it returns a function or undefined :</p></li>
</ul>

<p><strong>Elem</strong></p>

<pre><code>const Elem = ({ name }) =&gt; (
  &lt;li&gt;{name}&lt;/li&gt;
)
</code></pre>

<p><strong>List</strong></p>

<pre><code>const List = ({ values }) =&gt; (
  {values.map(value =&gt; &lt;Elem name={value.name} /&gt;)}      
)

List = connect(
  state =&gt; ({
    values: getFormValues('formName')
  })
)(List)
</code></pre>

<p>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 !</p>

<p>Thank you and have a great day.</p>