Sign in
Log inSign up

How can I add and remove list of select box in reactjs

Mohammad shahaparan mojumder's photo
Mohammad shahaparan mojumder
·Jul 14, 2019

1.I can only add and remove "value". It's doesn't remove from UI, but I see value "Add and Remove". I need to value remove from UI that is label.

If user click one items list of selected box , it will add data inside handleadd() method. I don't need duplicate data . 3.if user click on left arrow button , data will remove from select box(1) and it will add select box (2).

4.if user click on Right arrow button , data will remove from select box(2) and it will add select box (1).

class FieldForm extends React.Component {

state = { itemlist:[], itemlist2:[] } onChange = e => { const newitems = [...this.state.itemlist] newitems.push(e.target.value); this.setState({ itemlist:newitems }); };

handleadd = (data) => { this.setState({ itemlist2:data })

} handleremove= (data) => { console.log("remove",data) const newitems = [...this.state.itemlist2]

newitems.pop(data);
this.setState({
  itemlist2:data
})
console.log("data",data)

}

render() {

const options = [

{label:'Two', id:"2" }, { label:'Three', id:"3" } , {label:'Four', id:"4" }] return (

<select className="custom-select" onChange={this.onChange} multiple>
  {options&& options.map(item=>(  <option value={item.label}>{item.label}</option>))}

</select>
<div className="col-md-2 ">      
<button onClick={()=>this.handleadd(this.state.itemlist)} class="btn btn-primary btn-block w-25 margin-bottom">
  <i class="fa fa-arrow-right"></i>
</button>
<button onClick={()=>this.handleremove(this.state.itemlist) }class="btn btn-primary btn-block w-25">
  <i class="fa fa-arrow-left"></i>
</button>
</div>

<select className="custom-select" multiple>
  {
    this.state.itemlist2.map(item=>( <option value={item}>{item}</option>))
  }
</select>
)

} }

2