Реагировать js -Как я могу добавить входное значение в список массивов?

Question

Я пытаюсь добавить вход Number_list в виде списка массивов, но я пробовал много, но я не мог сделать это поле массивом все время, когда я заполнял данные, их показы в виде строкового формата, а не формата массива, так как сделать Форма ввода number_list в виде списка массивов - вот мой код.

import React, { Component } from "react";
import { withTranslation } from "react-i18next";

class Prize extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  handleAddFields = () => {
    const values = this.props.vall;
    values.push({
      number_list: [],
      prize_type: "",
      name: "",
      value: null,
      quantity: ""
    });
    this.setState({
      values
    });
  };

  handleRemoveFields = index => {
    const values = this.props.vall;
    values.splice(index, 1);
    this.setState({
      values
    });
  };


  //chnage() {
  //  var todos = [...this.props.vall];
  //  todos.push(this.newText.value);
  //  this.setState({ todos });
  //}

  async onChange(e, index) {
    if (
      ["number_list", "prize_type", "name", "value", "quantity"].includes(
        e.target.name
      )
    ) {
      let cats = [...this.props.vall];

      cats[index][e.target.name] = e.target.value;
      cats.push(this.newText.value);

      await this.setState({
        cats
      });
    } else {
      await this.setState({ [e.target.name]: e.target.value });
    }
    console.log(this.props.vall);
  }
  render() {


    const { t } = this.props;
    return (
      <div>
        <span>
          {this.props.vall.map((inputField, index) => (
            <div className="row" key={`${inputField}~${index}`}>
              <div className="col-sm-2">
                <div className="form-group">
                  <label id="p" for="title">
                    {t("title").toUpperCase()}
                  </label>
                  <input
                    type="text"
                    placeholder={t("type")}
                    name="name"
                    value={inputField.name}
                    onChange={e => {
                      this.onChange(e, index);
                    }}
                    className="form-control"
                  />
                </div>
              </div>

              <div className="col-sm-2">
                <div className="form-group">
                  <label id="p" for="title">
                    {t("prize_type").toUpperCase()}
                  </label>
                  <select
                    class="form-control donn"
                    name="prize_type"
                    value={inputField.prize_type}
                    onChange={e => {
                      this.onChange(e, index);
                    }}
                  >
                    <option value="" disabled hidden selected>
                      {t("choose")}
                    </option>
                    <option value="voucher">{t("prize_voucher")}</option>
                    <option value="bonus">{t("prize_bounus")}</option>
                    <option value="prize_type">{t("prize_trip")}</option>
                    <option value="prize_gadget">{t("prize_gadget")}</option>
                    <option value="other">{t("prize_other")}</option>
                  </select>
                </div>
              </div>

              <div className="col-sm-2">
                <div className="form-group">
                  <label id="p" for="title">
                    {t("prize_value").toUpperCase()}
                  </label>
                  <input
                    type="number"
                    placeholder={t("type")}
                    name="value"
                    style={{
                      border: "none",
                      borderBottom: "1px solid black"
                    }}
                    value={inputField.value}
                    onChange={e => {
                      this.onChange(e, index);
                    }}
                    className="form-control"
                  />
                </div>
              </div>

              <div className="col-sm-2">
                <div className="form-group">
                  <label id="p" for="title">
                    {t("prize_quantiy").toUpperCase()}
                  </label>
                  <input
                    type="number"
                    placeholder={t("type")}
                    name="quantity"
                    style={{
                      border: "none",
                      borderBottom: "1px solid black"
                    }}
                    value={inputField.quantity}
                    onChange={e => {
                      this.onChange(e, index);
                    }}
                    className="form-control"
                  />
                </div>
              </div>

              <div className="col-sm-2">
                <div className="form-group">
                  <label id="p" for="title">
                    {t("kind_metric").toUpperCase()}
                  </label>

                  <input
                    type="text"
                    name="number_list"
                    placeholder={t("type")}
                    ref={ip => {
                      this.newText = ip;
                    }}
                    value={inputField.number_list}
                    onChange={e => {
                      this.onChange(e, index);
                    }}
                    class="form-control donn"
                  />

                </div>
              </div>

              <div className="col-sm-2">
                <button
                  className="btn btn-danger"
                  style={{
                    marginTop: "30px",
                    background: "none",
                    border: "none"
                  }}
                  type="button"
                  onClick={() => this.handleRemoveFields(index)}
                >
                  <i className="fa fa-trash"></i>
                </button>
              </div>
            </div>
          ))}

          <a
            href="# "
            className="ppp"
            style={{ color: "#b71c1c" }}
            onClick={() => this.handleAddFields()}
          >
            {t("add_more_prize")}
          </a>
        </span>
      </div>
    );
  }
}

export default withTranslation()(Prize);

Из верхнего кода. Код ввода number_list - это входные данные. Я хочу принять список массивов, но я попытался, и мне не удалось, Руководство, что мне делать.

<input
      type="text"
      name="number_list"
      placeholder={t("type")}
      value={inputField.number_list}
      onChange={e => {
      this.onChange(e, index);
      }}
      class="form-control donn"
      />