ReactJS Добавление div к существующему div на основе кнопки onClick

Question

Я хотел бы добавить div в текущий div, имеющий несколько div, но каждый со своими уникальными элементами в выпадающем списке.

Основываясь на других ответах и ​​учебных пособиях, мне удалось придумать это, но дублированный div имеет то же значение, что и исходный div, и значение изменяется после изменения исходного div.

Могу ли я сделать так, чтобы значение не совпадало с приведенным выше? Я также хотел бы сделать его сортируемым в будущем

Заранее спасибо!

Песочница для полного кода https://codesandbox.io/s/stoic-mestorf-k997d

Код для секции рендеринга

    render() {
      return (
      <div>
        <h2>Sales Order</h2>
        {this.state.items.map((item, index) => (
          <span key={index}>
        <div>
           {/*dropdownlist for available items*/}
           <select
            name="sel"
            value={this.state.selecteditems}
            onChange={this.handleSelect(index)}
          >
          {this.state.data.map(item => 
            <option key={item.productID} value={item.unitPrice}>
              {item.itemName}
            </option>
          )}
          </select>

          {/*unit price*/}
          <p>Unit Price: RM {this.state.selecteditems} </p>

          {/*button to add quantity*/}
          {this.state.selecteditems.length ? (
            <button onClick={this.addPro}> + </button>
          ) : null }

          {/*textbox for quantity*/}
          {this.state.selecteditems.length ? (
            <input type="text" ref="quan" placeholder="Quantity" 
              value={this.state.quantity}
              onChange={(e) => 
                this.setState({quantity: e.target.value})}
              >
              </input>
          ) : null }

          {/*button to decrease quantity}*/}
          {this.state.selecteditems.length ? (
            <button onClick={this.decPro}> - </button>
          ) : null }

          {/*subtotal*/}
          {this.state.selecteditems.length ? (
            <p>Sub Total: RM {this.state.subtot} </p>
          ) : null }

          {/*button to remove all ements*/}
          <button onClick={this.handleDelete(index)}>X</button>
        </div>
        <br/><br/>
        </span>
        ))}
          <button onClick={this.addElements} >Add</button>

      </div>
    )  
  }

Код для добавления div

    addElements = e => {
      e.preventDefault()
      let items = this.state.items.concat([''])
      this.setState({
          items,
      })
    }

Answer 1

Извините за неудачный выбор слова в моем вопросе, что я в основном хочу, это просто добавить еще один выпадающий список со значением по умолчанию из того же списка данных из API.

Итак, в основном я создал новый компонент и добавил его в текущий компонент

import {NewComponent} from './components/NewComponent';

class App extends React.Component {
 constructor()
 {
  super();
  this.state = {
    children: []
  };
 }

   appendChild() {
     this.setState({
       children: [
         ...this.state.children, <NewComponent/>
       ]
     });
   }

    render() {
      return (
      <div>
       <button onClick={() => this.appendChild()}>Append Child</button>
        <div>
         {this.state.children.map(child => child)}
        </div>
      </div>

Спасибо всем, кто пытался мне помочь, надеюсь, это поможет всем, кто сталкивался с этим в будущем.