title: Redux-Form v6 Tracking dirty fields
body: <p>I have a component called 'collapseList' that renders an array of objects using ArrayField.  The data is something like this:</p>
  
  <pre><code>[ 
    { item-name: 'shirt', item-Id: 332 ...}, 
    { item-name: 'shoes', item-Id: 320 ...}
  ]
  </code></pre>
  
  <p>The question is how do I keep track of whether each item in my array is dirty or not?  For instance in my data, I want to know if only the input fields for the shoes object is dirty.  I get updated on dirty when an field changes and I can get the index and key of the object changed, but where do I store this?  I tried to create an object within the component to track it but when I do setState inside say renderField, I get errors saying I can't do that. What do I do?</p>
  
  <p>This is a simplified version of the code if anyone is interested and can help me.</p>
  
  <p><strong>collapseList.js</strong></p>
  
  <pre><code>class collapseList extends Component {
  
    handleSubmitter(values) {
      event.preventDefault();
      // handle submission
    }
  
    renderField({input, label, index, className, disabled, type, meta: {touched, error, dirty, warning}}) { 
      return(
        &lt;div&gt;
          &lt;label&gt;{label}&lt;/label&gt;
          &lt;div className="form-group row"&gt;
            &lt;div className={className}&gt;
              &lt;input className="form-control" {...input} placeholder={label} type={type} disabled={disabled}/&gt;
              {touched &amp;&amp;
                ((error &amp;&amp; &lt;span&gt;{error}&lt;/span&gt;) ||
                  (warning &amp;&amp; &lt;span&gt;{warning}&lt;/span&gt;))}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  
    renderList({ fields, meta: { dirty } }){
      return(
        &lt;div&gt;
          {fields.map((item, index, field) =&gt; {
            return (
              &lt;div&gt;
                &lt;Field 
                  name={`${item}['item-name']`}
                  component={this.renderField}
                  label="Item-Name"
                /&gt;
                &lt;Field 
                  name={`${item}['item-Id']`}
                  component={this.renderField}
                  label="Item-Id"
               /&gt;
              &lt;/div&gt;
            )}
           )}
        &lt;/div&gt;
       )
    }
  
    render(){
      return(
        &lt;div&gt;
          &lt;form onSubmit={handleSubmit(this.handleSubmitter)}&gt;
            &lt;FieldArray name="items" component={this.renderList} /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  
  }
  
  function mapStateToProps(state) {
    return {
      initialValues: {
        items: state.listings.list
      }
    }
  }
  
  export default connect(mapStateToProps, null)(reduxForm({
    form: 'collapseList',
    enableReinitialize: true,
    validate
  }, mapStateToProps)(collapseList));
  </code></pre>