How to create nested array in object when I use Formik.js?

Question

I want to create a nested board in the facility. Something like this:

I wonder if it is possible to convert everything so that it creates an object from an array unless someone knows a better way or idea for it? JSON example:

{
    "userId": "4",
    "offers":[
    {

        "mallCodename": "gallery",
        "shopCodename":"borubar",
        "productCodename": "green_socks",
        "discount": 30,
        "ttl": 3600
    },
    {
        "mallCodename": "gallery",
        "shopCodename":"nike",
        "productCodename": "sport_shoes",
        "discount": 30,
        "ttl": 222
    }
    ]
}

This is my component:

export default function Form(props) {
  const [values, setInputValue] = useState([]);
  const dispatch = useDispatch();


  function onChange(e) {
    e.preventDefault();
    const { name, value, type } = e.target;

    setInputValue({ ...values, [name]: value});
  }

  function onSubmit(e) {
    e.preventDefault();

    dispatch(sendOffer([values]));
    setInputValue([]);
  }

  return (
    <div id="accordion" role="tablist">
      <div className="card">
        <div className="card-header" role="tab" id="headingOne">
          <h5 className="mb-0">
            <a
              data-toggle="collapse"
              href="#collapseOne"
              aria-expanded="true"
              aria-controls="collapseOne"
            >
              Rozwin
            </a>
          </h5>
        </div>

        <div
          id="collapseOne"
          className="collapse show"
          role="tabpanel"
          aria-labelledby="headingOne"
        >
          <form onSubmit={onSubmit}>
            <table className="table table-responsive">
              <tbody className="tbody-form-promo">
                <tr className="tr-table-form-promo">
                  <td>Uzytkownik:</td>
                  <td>Nazwa produktu</td>
                  <td>Galleria</td>
                  <td>Nazwa sklepu</td>
                  <td>Znizka</td>
                  <td>Czas oferty</td>
                </tr>
                <tr className="tr-table-form-promo">
                  <td>{(values.userId = props.userId)}</td>
                  <td>
                    <input
                      className="text-place-post-form"
                      name="productCodename"
                      type="text"
                      placeholder="Nazwa produktu"
                      value={values.productCodename || ""}
                      onChange={onChange}
                      required
                    />
                  </td>
                  <td>
                    <input
                      className="text-place-post-form"
                      name="mallCodename"
                      type="text"
                      placeholder="Galeria"
                      value={values.mallCodename || ""}
                      onChange={onChange}
                      required
                    />
                  </td>
                  <td>
                    <input
                      className="text-place-post-form"
                      name="shopCodename"
                      type="text"
                      placeholder="Nazwa sklepu"
                      value={values.shopCodename || ""}
                      onChange={onChange}
                      required
                    />
                  </td>
                  <td>
                    <input
                      className="text-place-post-form"
                      name="discount"
                      type="number"
                      placeholder="max 100%"
                      value={values.discount || ""}
                      onChange={onChange}
                      onInput={inputMaxLength}
                      maxLength="3"
                      max={100}
                      min={0}
                      step={1}
                      required
                    />
                  </td>
                  <td>
                    <input
                      className="text-place-post-form"
                      type="number"
                      name="ttl"
                      placeholder="Max 180 minut"
                      value={values.ttl || ""}
                      max={180}
                      min={0}
                      step={1}
                      onChange={onChange}
                      maxLength="3"
                      onInput={inputMaxLength}
                      required
                    />
                  </td>
                </tr>
              </tbody>
            </table>

            <div className="container">
                <div className="row">
                    <div className="col-6 col-form-promo">
                        <Link to="/">
                            <button
                            className="btn btn-form-promo"
                            onClick={props.close}
                            >
                            Anuluj
                            </button>
                        </Link>
                    </div>
                    <div className="col-6 col-form-promo">
                            <button
                                className="btn btn-form-promo"
                                onSubmit={onSubmit}
                            >
                                Zapisz
                            </button>
                    </div>
                </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

I don't have Idee how to convert this. Or If somebody have better ideaa how can I do this. Please tell me :-).Nested array in object is very com

Answer 1

You should use FieldArray.

<FieldArray /> is a component that helps with common array/list manipulations. You pass it a name property with the path to the key within values that holds the relevant array. will then give you access to array helper methods via render props. For convenience, calling these methods will trigger validation and also manage touched for you.

You can also see an example of the exact same situation you have, array with objects inside.