Filedarray formik

gistfile1.txt

<FieldArray
                          name='couponList'
                          render={arrayHelpers => (
                            <div>
                              {values.couponList && values.couponList.length > 0 ? (
                                values.couponList.map((coupon, index) => (
                                  <div key={index}>
                                    <div className="row coupon-item" hidden={coupon.action === 'delete'}>
                                      <div className="col-md-10 details">
                                        {/* COUPON NAME */}
                                        <InputForm
                                          label="coupon name"
                                          name={`couponList[${index}].name`}
                                          value={coupon.name}
                                          placeholder={'Coupon name'}
                                          onChange={e => {
                                            handleChange(e.target.value);
                                            //this.onChangeCouponCode(coupon, 'name', e.target.value);
                                          }} />

                                        <ErrorMessage name={`couponList[${index}].name`} />
                                        {/* COUPON CODE */}
                                        <InputForm
                                          label="coupon code"
                                          name={`couponList[${index}].code`}
                                          value={coupon.code}
                                          placeholder={'Coupon code'}
                                          onChange={e => {
                                            handleChange(e.target.value);
                                            //this.onChangeCouponCode(coupon, 'code', e.target.value);
                                          }} />
                                        {/* DISCOUNT */}
                                        <div className="info-item coupon-discount">
                                          <div className="title">
                                            <span>Discount</span>
                                          </div>
                                          <div className="data">
                                            <Dropdown
                                              defaultValue={coupon.disCountType}
                                              defaultLabel={coupon.disCountType}
                                              options={[
                                                { label: '%', value: '%' },
                                                { label: '$', value: '$' },
                                              ]}
                                              //onChange={e => { this.handlePropsChange(coupon.index, 'disCountType', e.target.value); }}
                                              onSelect={value => { handleChange(value); }}
                                            />
                                            <input
                                              name={`couponList[${index}].disCount`}
                                              value={coupon.disCount}
                                              type="number"
                                              placeholder={'Discount'}
                                              className="discount-input"
                                              onChange={e => {
                                                this.onChangeCouponCode(coupon, 'disCount', e.target.value);
                                              }} />
                                          </div>
                                        </div>

                                        {/* Expiry date */}
                                        <div className="info-item expiry-date">
                                          <div className="title">
                                            <span>Expiry Date</span>
                                          </div>
                                          <div className="data">
                                            <Datepicker
                                              name={`couponList[${index}].expiredAt`}
                                              selected={coupon.expiredAt ? moment(coupon.expiredAt).toDate() : ''}
                                              placeholder={"Expiry Date"}
                                              //minDate={tomorrow}
                                              onChange={e => {
                                                this.onChangeCouponCode(coupon, 'expiredAt', e);
                                              }}
                                            />
                                          </div>
                                        </div>

                                        <div>{errors.couponList}</div>
                                      </div>
                                      <div className="col-md-2">
                                        <div className="delete-tab">
                                          <span className="icon-bin" onClick={e => { this.deleteCoupon(this.props.index); }}></span>
                                        </div>
                                      </div>
                                    </div>


                                  </div>
                                )
                                )) : 'Empty'}
                            </div>
                          )}
                        />