title: Is there any way to create same name of multiple fields like name="fieldName[ ]" in redux form?
body: <p>I am working on a scenario I am selecting an excel file and validating it, though my custom regex and validation rules . after validating I need to get a preview of that file in the table I am doing all these scenarios very well.  but here is the problem where on the specific index of column or row where excel file regex fails there should be either a text box or Combobox. it will be conditional on every column like if the email is invalid there should be an email input box soo that the user can correct it, on the other side of the user adds some invalid city that is not in DB there should be Combobox of cities soo that he can select valid one.</p>
  
  <p>Here is the code that i am using to read and validating the file</p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import { Field, reduxForm } from "redux-form";
  import RenderSelectInput from "../UI/select";
  import InputComponent from "../UI/input";
  import ImageUploaderComp from "../UI/imageUploader";
  
  import {
    getcities,
    getmunit,
    getstypes
  } from "../../redux/actions/comboAction";
  import XLSX from "xlsx";
  // reactstrap components
  import {
    Card,
    CardHeader,
    CardFooter,
    Badge,
    Button,
    CardBody,
    FormGroup,
    Form,
    Input,
    Container,
    CardTitle,
    CardText,
    Row,
    Col,
    Alert,
    UncontrolledAlert,
    DropdownMenu,
    DropdownItem,
    UncontrolledDropdown,
    DropdownToggle,
    Media,
    Pagination,
    PaginationItem,
    PaginationLink,
    Progress,
    Table,
    UncontrolledTooltip
  } from "reactstrap";
  // core components
  import Header from "components/Headers/Header.js";
  import { $CombinedState } from "redux";
  class ExcelBook extends Component {
    constructor(props) {
      super(props);
    }
  
    state = {
      ErrorMsg: null,
      SuccessMsg: null,
      isExcelLoaded: false,
      isExcelLoading: false,
      excelFileData: []
    };
    componentDidMount() {
      if (this.props.reduxStore.cities.fetchedCities.docs.length &lt;= 0) {
        this.props.getAllCities();
      }
      if (this.props.reduxStore.munit.fetchedMunit.docs.length &lt;= 0) {
        this.props.getAllmunits();
      }
  
      if (this.props.reduxStore.stypes.fetchedStypes.docs.length &lt;= 0) {
        this.props.getAllstypes();
      }
    }
    fileProcess = async e =&gt; {
      try {
        let contentBuffer = await this.onchangeHanglerExcelFile(e);
        console.log(contentBuffer);
        this.setState({
          excelFileData: contentBuffer,
          isExcelLoading: false,
          isExcelLoaded: true
        });
      } catch (err) {
        console.log(err);
      }
    };
    onchangeHanglerExcelFile = e =&gt; {
      this.setState({
        isExcelLoading: true
      });
      return new Promise((resolve, reject) =&gt; {
        const cities = this.props.reduxStore.cities.fetchedCities.docs;
  
        const shipmentTypes = this.props.reduxStore.stypes.fetchedStypes.docs;
        const munits = this.props.reduxStore.munit.fetchedMunit.docs;
  
        var reader = new FileReader();
        let excelData = [];
        reader.readAsArrayBuffer(e.target.files[0]);
  
        reader.onload = function(e) {
          var data = e.target.result;
          var data = new Uint8Array(reader.result);
          var wb = XLSX.read(data, { type: "array" });
  
          var first_worksheet = wb.Sheets[wb.SheetNames[0]];
          var data = XLSX.utils.sheet_to_json(first_worksheet, {
            header: 1
          });
  
          let i;
          let j;
          let k;
          let l;
  
          const comparedWithCities = [];
          const comparedWithShipmentTypes = [];
          const compareWithMunits = [];
          for (j = 0; j &lt; cities.length; j++) {
            comparedWithCities.push(cities[j].cityName);
          }
          for (k = 0; k &lt; shipmentTypes.length; k++) {
            comparedWithShipmentTypes.push(shipmentTypes[k].shipmentType);
          }
          for (l = 0; l &lt; munits.length; l++) {
            compareWithMunits.push(munits[l].unit);
          }
  
          for (i = 1; i &lt; data.length; i++) {
            const excelRowObject = {};
  
            excelRowObject["cName"] = data[i][0];
  
            if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(data[i][1])) {
              excelRowObject["cEmail"] = false;
            } else {
              excelRowObject["cEmail"] = data[i][1];
            }
            if (!/^3[0-9+]{9}$/i.test(data[i][2])) {
              excelRowObject["cPhone"] = false;
            } else {
              excelRowObject["cPhone"] = data[i][2];
            }
  
            if (!/^[a-zA-Z0-9 _/#&amp;+-||]{25,}$/i.test(data[i][3])) {
              excelRowObject["cAddress"] = false;
            } else {
              excelRowObject["cAddress"] = data[i][3];
            }
            const ccity = data[i][4].replace(/\s/g, "").toLowerCase();
            const capitalCity = ccity.charAt(0).toUpperCase() + ccity.slice(1);
  
            if (comparedWithCities.includes(capitalCity) === false) {
              excelRowObject["cCity"] = false;
            } else {
              const ccity = data[i][4].replace(/\s/g, "").toLowerCase();
              const capitalCity = ccity.charAt(0).toUpperCase() + ccity.slice(1);
              excelRowObject["cCity"] = capitalCity;
            }
  
            if (!/^[0-9]*$/.test(data[i][5])) {
              excelRowObject["cAmount"] = false;
            } else {
              excelRowObject["cAmount"] = data[i][5];
            }
            excelRowObject["productDescription"] = data[i][6];
            excelRowObject["cWeight"] = data[i][7];
  
            const cstype = data[i][8].replace(/\s/g, "").toLowerCase();
            const capitalStype = cstype.charAt(0).toUpperCase() + cstype.slice(1);
            if (comparedWithShipmentTypes.includes(capitalStype) === false) {
              excelRowObject["cStypes"] = false;
            } else {
              const cstype = data[i][8].replace(/\s/g, "").toLowerCase();
              const capitalStype =
                cstype.charAt(0).toUpperCase() + cstype.slice(1);
              excelRowObject["cStypes"] = capitalStype;
            }
            if (!/^[0-9]*$/.test(data[i][9])) {
              excelRowObject["cPieces"] = false;
            } else {
              excelRowObject["cPieces"] = data[i][9];
            }
            if (
              data[i][10] === "Y" ||
              data[i][10] === "N" ||
              data[i][10] === "y" ||
              data[i][10] === "n"
            ) {
              excelRowObject["cFragile"] = data[i][10];
            } else {
              excelRowObject["cFragile"] = false;
            }
            const dimentionArr = data[i][11].split(",");
  
            const munit = dimentionArr[0].replace(/\s/g, "").toLowerCase();
            const capitalMunit = munit.charAt(0).toUpperCase() + munit.slice(1);
  
            if (compareWithMunits.includes(capitalMunit) === false) {
              excelRowObject["cMunit"] = false;
            } else {
              const munit = dimentionArr[0].replace(/\s/g, "").toLowerCase();
              const capitalMunit = munit.charAt(0).toUpperCase() + munit.slice(1);
              excelRowObject["cMunit"] = capitalMunit;
            }
            if (!/^[0-9]*$/.test(dimentionArr[1])) {
              excelRowObject["cHeight"] = false;
            } else {
              excelRowObject["cHeight"] = dimentionArr[1];
            }
            if (!/^[0-9]*$/.test(dimentionArr[2])) {
              excelRowObject["cWidth"] = false;
            } else {
              excelRowObject["cWidth"] = dimentionArr[2];
            }
            if (!/^[0-9]*$/.test(dimentionArr[3])) {
              excelRowObject["cLength"] = false;
            } else {
              excelRowObject["cLength"] = dimentionArr[3];
            }
  
            excelData.push(excelRowObject);
          }
          resolve(excelData);
        };
        reader.onerror = reject;
      });
    };
    handleSubmit(data) {
      console.log(data);
    }
    renderName = ({ fields, meta: { submitFailed, error } }) =&gt; (
      &lt;div&gt;
        {fields.map((name, index) =&gt; (
          &lt;div key={index}&gt;
            &lt;Field
              component={InputComponent}
              className="form-control-alternative"
              name={`${name}.consigneName`}
              type="text"
              id="input-consigneeName"
              placeholder="Consginee Name"
            /&gt;
          &lt;/div&gt;
        ))}
      &lt;/div&gt;
    );
    render() {
      const { handleSubmit, isSendingRequest } = this.props;
  
      return (
        &lt;&gt;
          &lt;Header
            pageType="innerPage"
            headerClass="header bg-gradient-success pb-8 pt-5 pt-md-8"
          /&gt;
          {/* Page content */}
          &lt;Container className="mt--7" fluid&gt;
            {/* Table */}
            &lt;Row&gt;
              &lt;div className="col"&gt;
                &lt;Card className="shadow"&gt;
                  &lt;CardHeader className="border-0"&gt;
                    &lt;h3 className="mb-0"&gt;Excel Booking&lt;/h3&gt;
                  &lt;/CardHeader&gt;
                  &lt;CardBody align="center"&gt;
                    &lt;CardTitle&gt;
                      Book your packet according to the sample provided below,
                      supported file types are &lt;br /&gt;
                      &lt;b style={{ color: "green" }}&gt;(CSV , XLSX , XLS)&lt;/b&gt;
                    &lt;/CardTitle&gt;
  
                    &lt;Button
                      className="btn-icon btn-3"
                      color="primary"
                      type="button"
                      onClick={this.onclickHandler}
                    &gt;
                      &lt;span className="btn-inner--icon"&gt;
                        &lt;i className="fa fa-download" /&gt;
                      &lt;/span&gt;
                      &lt;span className="btn-inner--text"&gt;Sample File&lt;/span&gt;
                    &lt;/Button&gt;
  
                    &lt;Button
                      className="btn-icon btn-3"
                      color="success"
                      type="button"
                    &gt;
                      &lt;span className="btn-inner--icon"&gt;
                        &lt;i className="fa fa-upload" /&gt;
                      &lt;/span&gt;
                      &lt;span className="btn-inner--text"&gt;Upload Excel&lt;/span&gt;
                    &lt;/Button&gt;
                    &lt;input
                      type="file"
                      onChange={value =&gt; this.fileProcess(value)}
                    &gt;&lt;/input&gt;
                    &lt;div id="wrapper"&gt;&lt;/div&gt;
                  &lt;/CardBody&gt;
                &lt;/Card&gt;
              &lt;/div&gt;
            &lt;/Row&gt;
  
            &lt;Row&gt;
              &lt;div className="col"&gt;
                &lt;Card className="shadow"&gt;
                  &lt;CardHeader className="border-0"&gt;
                    &lt;h3 className="mb-0"&gt;PREVIEW&lt;/h3&gt;
                  &lt;/CardHeader&gt;
                  &lt;Form
                    encType="multipart/form-data"
                    onSubmit={handleSubmit(this.handleSubmit.bind(this))}
                  &gt;
                    &lt;Table className="align-items-center table-flush" responsive&gt;
                      &lt;thead className="thead-light"&gt;
                        &lt;tr&gt;
                          &lt;th scope="col"&gt;Consignee Name&lt;/th&gt;
                          &lt;th scope="col"&gt;Consignee Email&lt;/th&gt;
                          &lt;th scope="col"&gt;Consginee Phone&lt;/th&gt;
                          &lt;th scope="col"&gt;Consginee Address&lt;/th&gt;
                          &lt;th scope="col"&gt;Designation City&lt;/th&gt;
                          &lt;th scope="col"&gt;Amount&lt;/th&gt;
                          &lt;th scope="col"&gt;Product Desciption&lt;/th&gt;
                          &lt;th scope="col"&gt;Weight&lt;/th&gt;
                          &lt;th scope="col"&gt;Shipment Type&lt;/th&gt;
                          &lt;th scope="col"&gt;Pieces&lt;/th&gt;
                          &lt;th scope="col"&gt;Fragile&lt;/th&gt;
                          &lt;th scope="col"&gt;Unit&lt;/th&gt;
                          &lt;th scope="col"&gt;Height&lt;/th&gt;
                          &lt;th scope="col"&gt;Width&lt;/th&gt;
                          &lt;th scope="col"&gt;Length&lt;/th&gt;
  
                          &lt;th scope="col" /&gt;
                        &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                        {this.state.isExcelLoaded &amp;&amp;
                        this.state.isExcelLoading === false ? (
                          this.state.excelFileData.map((p, index) =&gt; {
                            return (
                              &lt;tr key={index}&gt;
                                &lt;td&gt;{p.cName}&lt;/td&gt;
                                &lt;td&gt;{p.cEmail}&lt;/td&gt;
                                &lt;td&gt;{p.cPhone}&lt;/td&gt;
                                &lt;td&gt;{p.cAddress}&lt;/td&gt;
                                &lt;td&gt;{p.cCity}&lt;/td&gt;
                                &lt;td&gt;{p.cAmount}&lt;/td&gt;
                                &lt;td&gt;{p.productDescription}&lt;/td&gt;
                                &lt;td&gt;{p.cWeight}&lt;/td&gt;
                                &lt;td&gt;{p.cStypes}&lt;/td&gt;
                                &lt;td&gt;{p.cPieces}&lt;/td&gt;
                                &lt;td&gt;{p.cFragile}&lt;/td&gt;
                                &lt;td&gt;{p.cMunit}&lt;/td&gt;
                                &lt;td&gt;{p.cHeight}&lt;/td&gt;
                                &lt;td&gt;{p.cWidth}&lt;/td&gt;
                                &lt;td&gt;{p.cLength}&lt;/td&gt;
                              &lt;/tr&gt;
                            );
                          })
                        ) : (
                          &lt;tr&gt;
                            &lt;td&gt;Select File&lt;/td&gt;
                          &lt;/tr&gt;
                        )}
                      &lt;/tbody&gt;
                    &lt;/Table&gt;
                    &lt;Button type="submit"&gt;&lt;/Button&gt;
                  &lt;/Form&gt;
                  &lt;CardFooter className="py-4"&gt;&lt;/CardFooter&gt;
                &lt;/Card&gt;
              &lt;/div&gt;
            &lt;/Row&gt;
          &lt;/Container&gt;
        &lt;/&gt;
      );
    }
  }
  const mapStateToProps = state =&gt; {
    return {
      reduxStore: state
    };
  };
  const mapDispatchToProps = dispatch =&gt; {
    return {
      getAllCities: () =&gt; {
        dispatch(getcities());
      },
      getAllmunits: () =&gt; {
        dispatch(getmunit());
      },
      getAllstypes: () =&gt; {
        dispatch(getstypes());
      }
    };
  };
  ExcelBook = reduxForm({
    form: "excelBooking",
  
  })(ExcelBook);
  export default connect(mapStateToProps, mapDispatchToProps)(ExcelBook);
  </code></pre>
  
  <p>this is the excel file i am trying to upload :</p>
  
  <p><a href="https://i.stack.imgur.com/dkqZT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dkqZT.png" alt="excel file screenshot i am using"></a></p>
  
  <p>this is preview i got after validating and processing excel file clientside 
  note where you see empty spaces are failed validation </p>
  
  <p><a href="https://i.stack.imgur.com/ISg2h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ISg2h.png" alt="result after upload"></a></p>
  
  <p>this is the response that i am looping through and rendering it in my dom for preview, note the fields those are false are failed validation &amp; each object in this array is a row.</p>
  
  <p><a href="https://i.stack.imgur.com/gsPyK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gsPyK.png" alt="response preview"></a></p>
  
  <p>i tried my best to demonstrate my problem. according to my vission response is generated already main focus is to conditionally render fields using redux-form i also use and wrap my head around fieldarray but i am not able to crack this situation with it.</p>