Ошибка: «x» только для чтения: при попытке отобразить переменный элемент HTML в React

Question

У меня есть корзина, и я должен динамически отображать кол-во корзины в теге.

Для этого у меня есть функция cartQtySelectRender, которая for loops this.state.cartItemsQty и создает строковый HTML-тегпеременная вот так ...

  cartQtySelectRender() {
    const cartQty = this.state.cartItemsQty;
    const qtySelectElement = "<select>";
    if (cartQty > 0) {
      for (let i = 0; i <= cartQty; i++) {
        qtySelectElement += `<option> ${i} </option>`;
      }
      return (qtySelectElement += "</select>");
    } else {
      qtySelectElement += "<option>0</option>";
      return qtySelectElement;
    }
  }

Я отображаю возвращенное значение qtySelectElement в методе визуализации --->

  render() {


    return (
      <React.Fragment>
        <h1>Cart </h1>
        <table className="table">
          <thead>
              # code...
          </thead>
          <tbody>
            {this.state.cartItems.map(itemObj => (
              <tr key={itemObj.item.id}>
                <td>{itemObj.item.name}</td>
                <td>{itemObj.item.productDesc}</td>
                <td>
                  <select>{this.cartQtySelectRender()}</select> <<----
                </td>
                <td>{itemObj.item.productPrice}</td>
                <td>Delete</td>
              </tr>
            ))}
          </tbody>
        </table>

      </React.Fragment>
    );
  }

Error: "qtySelectElement" is read-only

 24 | const qtySelectElement = "<select>";
  25 | if (cartQty > 0) {
  26 |   for (let i = 0; i <= cartQty; i++) {
> 27 |     qtySelectElement += `<option> ${i} </option>`;
     | ^  28 |   }
  29 |   return (qtySelectElement += "</select>");
  30 | } else {

Answer 1

Вы не должны возвращать строку, но создайте JSX, как показано ниже

cartQtySelectRender() {
    const cartQty = this.state.cartItemsQty;
    return (
       <select> 
          <option value="0" >0</option>
          {
            for(let i=1; i<= cartQty; i++)
            { <option key={i} value={i}> {i} </option> } 
          }
       </select>
    )
}