title: How to set array into state onclick redux form
body: <p>I am using a wizard in my project. In step 2 I have one form with a data table. The purpose of a data table is when I click on the button a form value pushes into a data table. I have done this when I submit the form, a form value append or push into a data table but I am facing an issue is that I can't maintain or set the state of that <code>a data table array</code>. </p>
  
  <p>My code is shown below</p>
  
  <pre><code>import React, {useState, Fragment} from 'react';
  import PropTypes from 'prop-types';
  import { Field, FieldArray, reduxForm } from 'redux-form'
  import FormInput from './../FormInput'
  import ConsigneeTables from './ConsigneeTables'
  import {
    Button,
    Card,
    CardBody,
    Col,
    FormGroup,
    Input,
    Label,
    Row,
    Table,
    Progress
  } from 'reactstrap'
  
  const ConsigneeLocations = (props) =&gt; {
    const {handleSubmit, previousPage} = props
    const consigneeData = []
  
    const initialFormState = {
      id: null,
      consignee_branch_number: '',
      consignee_add1: '',
    }
  
  
  
    const [CurrentConsignee, setCurrentConsignee] = useState(initialFormState)
  
    const [consignees, setConsignees] = useState(consigneeData)
  
    const [consignee, setConsignee] = useState(initialFormState)
  
    const handleInputChange = (event) =&gt; {
      const {name, value} = event.target
      setConsignee({
        ...consignee,
        [name]: value
      })
    }
  
    const addConsignee = () =&gt; {
      consignee.id = consignees.length + 1
      console.log(consignee);
      consignees.push(consignee)
      setConsignees([...consignees])
    }
  
  
  
  
    return (&lt;form onSubmit={handleSubmit}&gt;
  
      &lt;h2&gt;View users&lt;/h2&gt;
      &lt;ConsigneeTables consignees={consignees}/&gt;
  
      &lt;Col xs="12" sm="12"&gt;
        &lt;Card className="card-border"&gt;
          &lt;CardBody&gt;
            &lt;Col xs="12" sm="12"&gt;
              &lt;Card className="card-border"&gt;
                &lt;CardBody&gt;
                  &lt;FormGroup row&gt;
                    &lt;Col xs="12" lg="6"&gt;
                      &lt;Field name="consignee_branch_number" type="text" component={FormInput} value={consignee.consignee_branch_number} onChange={handleInputChange} label="Branch Sr No" inputPlaceHolder="Enter Branch Sr No"/&gt;
                    &lt;/Col&gt;
                    &lt;Col xs="12" lg="6"&gt;
                      &lt;Field name="consignee_add1" type="textarea" component={FormInput} value={consignee.consignee_add1} onChange={handleInputChange} label="Address 1" inputPlaceHolder="Enter Address 1"/&gt;
                    &lt;/Col&gt;
                  &lt;/FormGroup&gt;
  
                &lt;/CardBody&gt;
  
                &lt;div style={{
                    paddingBottom: 30
                  }}&gt;
                  &lt;Button color="primary" className="btn-pill pull-right" type="button" onClick={addConsignee} style={{
                      marginRight: '20px'
                    }}&gt;
                    Add
                  &lt;/Button&gt;
                &lt;/div&gt;
              &lt;/Card&gt;
            &lt;/Col&gt;
            &lt;div style={{
                paddingBottom: 30
              }}&gt;
              &lt;Button color="primary" className="btn-pill pull-left" onClick={previousPage} style={{
                  marginLeft: '20px'
                }}&gt;
                &lt;i className="fa fa-chevron-left"/&gt;
                &amp;nbsp; Previous
              &lt;/Button&gt;
              &lt;Button color="primary" className="btn-pill pull-right" type="submit" style={{
                  marginRight: '20px'
                }}&gt;
                Next &amp;nbsp;
                &lt;i className="fa fa-chevron-right"/&gt;
              &lt;/Button&gt;
            &lt;/div&gt;
          &lt;/CardBody&gt;
        &lt;/Card&gt;
      &lt;/Col&gt;
    &lt;/form&gt;);
  };
  
  ConsigneeLocations.propTypes = {
    handleSubmit: PropTypes.func,
    pristine: PropTypes.bool,
    previousPage: PropTypes.func,
    submitting: PropTypes.bool
  };
  
  export default reduxForm({form: 'consigneesLocation', destroyOnUnmount: false, forceUnregisterOnUnmount: true})(ConsigneeLocations);
  </code></pre>
  
  <p>My data table component</p>
  
  <pre><code>import React from 'react'
  
  const ConsigneeTables = props =&gt; (
    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Branch Number&lt;/th&gt;
        &lt;th&gt;Address&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        {props.consignees.length &gt; 0 ? (
          props.consignees.map(consignee =&gt; (
            &lt;tr key={consignee.id}&gt;
              &lt;td&gt;{consignee.consignee_branch_number}&lt;/td&gt;
              &lt;td&gt;{consignee.consignee_add1}&lt;/td&gt;
            &lt;/tr&gt;
          ))
        ) : (
          &lt;tr&gt;
            &lt;td colSpan={3}&gt;No Data&lt;/td&gt;
          &lt;/tr&gt;
        )}
      &lt;/tbody&gt;
    &lt;/table&gt;
  )
  
  export default ConsigneeTables
  </code></pre>
  
  <p>Please suggest to me how to handle <code>consignees state</code>.  I already use <code>setState</code> onClick but I don't know how to handle <code>consignees state</code> every step. </p>