如何在ReactJS中添加和删除选择框

Question

我有2个选择框，当用户单击select（1）时，数据将通过选择框（2）。但是，只定义了选择框（2）的两个值列表-一个是用“左箭头”图标添加的，第二个是用“右箭头”图标删除的

我只能在第二个选择框中传递数据，但我只需要两个值添加和删除

例如： 我的第一个选择元素

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
second select box has only two values :
 <select>
  <option value="add"> -> Add</option>
  <option value="remove">  <- Remove</option>
</select>


class EmailEditorApp extends Component {
state = {
      frets: "",
      frets2:[],
      frets3:[]

    };

  onChange = e => {
    const newd = [...this.state.frets2]
    newd.push(e.target.value)
    this.setState({
      [e.target.name]: e.target.value,
      frets2:newd
    });
  };

  onChange2=(e)=>{
    this.setState({frets3:e})
    console.log("data",e)
  }
 onChange3=(e)=>{
    console.log("data",e)
  }
  render() {
        const frets = [
      { label: 20, value: 20 },
      { label: 21, value: 21 },
      { label: 22, value: 22 },
      { label: 24, value: 24 }
    ];
    return <HubContent title="User Mail">
            <select
              name="frets"
              value={this.state.frets}
              onChange={this.onChange}
            >
              <option value="">Select Frets</option>

              {frets
                ? frets.map((item, i) => (
                    <option key={item.label} value={item.value}>
                      {item.value}
                    </option>
                  ))
                : null}
            </select>
            <select
              name="frets"
              value={this.state.frets2}
              onChange={this.onChange2}
            >
              <option value="">Select item</option>
              <option value="add"> -> Add</option>
              <option value="remove">- Remove</option>

            </select>
     {this.state.frets3.map(item=>(<div>{item.value}</div>))}

    </HubContent>
  }
}