title: redux-form Dinamically inject objects into FieldArray `field` property
body: <p>What I am trying to accomplish is a dynamic FieldArray similar to the one in the <a href="http://redux-form.com/6.6.1/examples/fieldArrays/" rel="nofollow noreferrer">redux form example</a> but the difference is that every object I am adding to the list already has all properties (which i have to display) but one that I need to calculate from other two of them.</p>
  
  <p>Take a look at this example:</p>
  
  <pre><code>import React from 'react'
  import { compose } from 'redux';
  import { connect } from 'react-redux';
  import { Field, FieldArray, reduxForm, formValueSelector } from 'redux-form'
  
  const renderField = ({ input, label, type, meta: { touched, error } }) =&gt; (
    &lt;div&gt;
      &lt;label&gt;{label}&lt;/label&gt;
      &lt;div&gt;
        &lt;input {...input} type={type} placeholder={label}/&gt;
        {touched &amp;&amp; error &amp;&amp; &lt;span&gt;{error}&lt;/span&gt;}
      &lt;/div&gt;
    &lt;/div&gt;
  )
  
  const renderSelect = (products) =&gt; (
    &lt;div&gt;
      &lt;label&gt;Select Product to Add&lt;/label&gt;
      &lt;div&gt;
        &lt;Field name="products" component="select"&gt;
          &lt;option&gt;&lt;/option&gt;
          {products.map(p =&gt; &lt;option value={p.id}&gt;{p.name}&lt;/option&gt;)}
        &lt;/Field&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  
  const renderCompetences = ({ fields, meta: { touched, error, submitFailed }}) =&gt; {
    return (
      &lt;div&gt;
        {/* &lt;div&gt;
          &lt;button type="button" onClick={() =&gt; fields.push({})}&gt;Add Competence&lt;/button&gt;
          {(touched || submitFailed) &amp;&amp; error &amp;&amp; &lt;span&gt;{error}&lt;/span&gt;}
        &lt;/div&gt; */}
        &lt;ul&gt;
          {fields.map((competence, index) =&gt;
                      &lt;li key={index}&gt;
                        &lt;h4&gt;Competence #{index + 1}&lt;/h4&gt;
                        &lt;Field
                          name={`${competence}.singlePrice`}
                          type="number"
                          component={renderField}
                          label="Single Price"/&gt;
                        &lt;Field
                          name={`${competence}.standardQuantity`}
                          type="number"
                          component={renderField}
                          label="Standard Quantity"/&gt;
                        &lt;Field
                          name={`${competence}.totalPrice`}
                          type="number"
                          component={renderField}
                          label="Total Price"/&gt;
  
                        &lt;button 
                          type="button" 
                          onClick={() =&gt; fields.remove(index)} 
                          style={{color: 'red'}}
                          &gt;
                          ✘
                        &lt;/button&gt;
                      &lt;/li&gt;
                     )}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
  
  const FieldArraysForm = (props) =&gt; {
    const { handleSubmit, pristine, reset, submitting, products, productsValue } = props;
  
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;Field name="recipientName" type="text" component={renderField} label="Recipient Name"/&gt;
        &lt;FieldArray name="competences" component={renderCompetences} /&gt;
        {renderSelect(products)}
        &lt;div&gt;
          &lt;button type="submit" disabled={submitting}&gt;Submit&lt;/button&gt;
          &lt;button type="button" disabled={pristine || submitting} onClick={reset}&gt;Clear Values&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    )
  }
  
  const selector = formValueSelector('fieldArrays');
  
  const mapStateToProps = (state) =&gt; {
    const productsValue = selector(state, 'products');
    return { productsValue };
  };
  
  export default compose(
    connect(mapStateToProps),
    reduxForm({
      form: 'fieldArrays'
    })
  )(FieldArraysForm);
  </code></pre>
  
  <p>I should display the products I selected form the select in my unordered list and every time I select a new object I should add it to the list.</p>
  
  <p>Here you can see an example of the products array:</p>
  
  <pre><code>const products = [
    { id: '0', name: 'Product One', singlePrice: 101, standardQuantity: 1},
    { id: '1', name: 'Product Two', singlePrice: 39, standardQuantity: 6},
    { id: '2', name: 'Product Three', singlePrice: 85, standardQuantity: 4},
    { id: '3', name: 'Product Four', singlePrice: 1, standardQuantity: 20}
  ];
  </code></pre>
  
  <p><strong>Here is a working example to test some solutions:</strong>
  <a href="https://www.webpackbin.com/bins/-Kecgj77Gbxo_4am3WS1" rel="nofollow noreferrer">https://www.webpackbin.com/bins/-Kecgj77Gbxo_4am3WS1</a></p>
  
  <p>Thank you so much for any help you can give!</p>