title: How to display fields from FieldArray in a different component (one component up) with redux-form
body: <p>I use <code>&lt;FieldArray&gt;</code> from <code>redux-form</code> (slightly older version, react 16.3.0 and redux-form 7.2.1) and it works if I use it like in the docs. But I want the button to display in one component and the fields in a different component:</p>
  <pre><code>&lt;App&gt;
      &lt;Cmp1/&gt;
      &lt;Cmp2/&gt;
      // this is where I want the fields
  &lt;/App&gt;
  </code></pre>
  <p>The button should be in <code>&lt;Cmp1/&gt;</code> while the actual fields should be displayed in <code>&lt;App/&gt;</code>.</p>
  <p><code>&lt;App/&gt;</code>:</p>
  <pre><code>class App extends React.Component{
    constructor(props){
      this.state = {
        fields: []
      }
    } 
   
    onFieldArrayChange(field){
      const {fields} = this.state;
      const newFields = fields.push(field);
      this.setState({...this.state, fields: newFields});
    }
  
    render(){
       return (
         &lt;div&gt;
             My App 
             &lt;div&gt;{this.state.fields}&lt;/div&gt;
             &lt;Cmp1 onFieldArrayChange={this.onFieldArrayChange.bind(this)}
        &lt;/div&gt;
       )
  
    }
  }
  </code></pre>
  <p>I tried the following, <code>&lt;Cmp1/&gt;</code>:</p>
  <pre><code>class Cmp1 extends React.Component{
    renderMyFieldArray({ fields, meta: { error, submitFailed } }){
      return(
        &lt;button type=&quot;button&quot; onClick={() =&gt; this.props.onFieldArrayChange(&lt;MyField
                        key={fields.length}
                        name={`myName[${fields.length}]`}
                        index={fields.length})
         &gt;Add Field&lt;/button&gt;
      ) 
    }
    
    render(){
      return(
        &lt;FieldArray name=&quot;myName&quot; component={this.renderMyFieldArray.bind(this} /&gt; 
      )
    }
  }
  </code></pre>
  <p>This works, however, the input is really slow. When I try to put in a string it cuts off after each letter and I have to click on the field again.</p>
  <p>I also tried passing the fields up like so in<code>&lt;Cmp1/&gt;</code>:</p>
  <pre><code>&lt;button type=&quot;button&quot; onClick={() =&gt; this.props.onFieldArrayChange(fields)}&gt;
       Add Filter
  &lt;/button&gt;
  </code></pre>
  <p>And in <code>&lt;App/&gt;</code> I set the state to the fields then:</p>
  <pre><code>onFieldArrayChange(field){
    const {fields} = this.state;
    const newFields = fields.push({});
    this.setState({...this.state, fields: newFields});
  }
  </code></pre>
  <p>and then in the render function I map over the fields like so:</p>
  <pre><code>{this.state.fields.map((name, index)=&gt;{
      return (
          &lt;MyField
             key={index}
             name={name}
             index={index}
          /&gt;
      );
  })}
  </code></pre>
  <p>In that case the first field does not get displayed. I have to click twice to get 1 field displayed.</p>
  <p>How do I achieve this?</p>