динамический c числовой c раскрывающийся список

Question

Доброе утро всем,

У меня есть раскрывающийся список «разнообразие», где я получаю «plant_id», пока все не работает нормально :), но меня беспокоит второй раскрывающийся список. Я пытаюсь восстановить количество в соответствии с id_plante (выберите ранее) и создаю раскрывающийся список, который будет начинаться с 1 до числа (количества). Обычно, если количество = 8, то выпадающий список от 1 до 8

import React from "react";
const SERVER_ADDRESS = process.env.REACT_APP_SERVER_ADDRESS;

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          planteData:[],
          id_plante: "",
          quantiteData:[],
          numero: "",

        };
        this.handleChangeSelect = this.handleChangeSelect.bind(this);
    }

    componentDidMount = () => {
      fetch(SERVER_ADDRESS + "/api/plante")
         .then((res) => res.json())
         .then((res) => this.setState({ planteData: res })); 

    };

    handleChangeSelect(e) {
      this.setState({
        id_plante: e.target.value,
        validationError:
          e.target.value === "" ? "select variete" : "",
      })
       const id_plante = this.state.id_plante;
       
       fetch(SERVER_ADDRESS + "/api/plante/quantite/" + id_plante)
          .then((res) => res.json())
          .then((res) => this.setState({ quantiteData: res }));

          const quantiteData = this.state.quantiteData;
          let obj = {
            array: [],
          };
          // for (var l = 0; l < 100; l++) {
            for (var l = 0; l < {quantiteData}; l++) {
            obj.array[l] = l + 1;
          }
    } 
   
    render() {
     
let obj = {
  array: [],
};

        return (
            <div className=" off-dsk-2 dsk-3">
       <div className="justi">
                <label htmlFor="variete_suivi"> Variete :</label>
                <select
                  value={this.state.id_plante}
                  onChange={this.handleChangeSelect}
                >
                  {this.state.planteData.map((plante) => (
                    <option key={plante.id_plante} value={plante.id_plante}>
                      {" "}
                      {plante.variete}{" "}
                    </option>
                  ))}
                </select>
              </div>

              <div className="justi">
                <label htmlFor="numero"> Numero :</label>
                <select
                  value={this.state.numero}
                  onChange={(e) =>
                    this.setState({
                      numero: e.target.value,
                      validationError:
                        e.target.value === "" ? "select number" : "",
                    })
                  }
                >
                  {" "}
                  {obj.array.length > 0 &&
                    obj.array.map((item) => (
                      <option key={item} value={item}>
                        {item}
                      </option>
                    ))}
                </select>
              </div>
            </div>
        )
    }

    onId_planteChange(event) {
      this.setState({ id_plante: event.target.value });
    }
    onNumeroChange(event) {
      this.setState({ numero: event.target.value });
    }

    handleSubmit(event) {
      event.preventDefault();
  
      fetch(SERVER_ADDRESS + "/api/suivi/", {
        method: "POST",
        body: JSON.stringify(this.state),
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
      })
        .then((response) => response.json())
        .then((response) => {
          if (response.status === "success") {
            alert("Message Sent.");
            this.resetForm();
          } else if (response.status === "fail") {
            alert("Message failed to send.");
          }
        });
    }

    }
    export default Test;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

мой json

[
    {
        "id_plante": 1,
        "quantite": "3"
    },
    {
        "id_plante": 2,
        "quantite": "3"
    },
    {
        "id_plante": 3,
        "quantite": "1"
    },
    {
        "id_plante": 4,
        "quantite": "3"
    }
]

Если у кого-то есть преимущество, я берущий.

заранее спасибо Niblon