I am new to react (and javascript in general) but am enjoying learning it. I have decided to make a little multiselect component which should work as follows:
I start with my data in one list, when I select an item from the list it goes into a second list (I can 'unselect' as well).
I also can filter the first list with a text input.
Before you review, I realize that there are likely existing solutions for this functionality that I could use, but I am just doing this to learn.
codepen here https://codepen.io/str8wavedave/pen/ZqWXQp
class MultiSelect extends React.Component {
render(){
return(
<ul>
{this.props.objects.map((object, index) => <li onClick = {() => this.props.onClickFunction(index)}>{object.name}</li>)}
</ul>
);
}
}
class DoubleMultiselect extends React.Component {
state = {
value: '',
filteredUnselectedObjects: this.props.objects,
unselectedObjects: this.props.objects,
selectedObjects: [],
}
filterList = (event) => {
var updatedList = this.state.unselectedObjects;
updatedList = updatedList.filter(function(item){
return item.name.toLowerCase().search(
event.target.value.toLowerCase()) !== -1;
});
this.setState({
filteredUnselectedObjects: updatedList,
value: event.target.value
})
}
handleSelect = (index) => {
var obj = this.state.filteredUnselectedObjects[index]
var newSelected = this.state.selectedObjects.slice()
newSelected.push(obj)
var newUnselected = this.state.unselectedObjects.slice()
var originalIndex = newUnselected.indexOf(obj);
newUnselected.splice(originalIndex, 1)
var newFilteredUnselected = this.state.filteredUnselectedObjects.slice()
newFilteredUnselected.splice(index, 1)
this.setState({
selectedObjects: newSelected,
unselectedObjects: newUnselected,
filteredUnselectedObjects: newFilteredUnselected
});
}
handleUnselect = (index) => {
var obj = this.state.selectedObjects[index]
var newUnselected = this.state.unselectedObjects.slice()
newUnselected.push(obj)
var newFilteredUnselected = this.state.filteredUnselectedObjects.slice()
if(obj.name.toLowerCase().search(this.state.value.toLowerCase()) !== -1)
{
newFilteredUnselected.push(obj)
}
var newSelected = this.state.selectedObjects.slice()
newSelected.splice(index, 1)
this.setState({
unselectedObjects: newUnselected,
selectedObjects: newSelected,
filteredUnselectedObjects: newFilteredUnselected
});
}
render() {
return(
<div>
<input type="text" onChange={this.filterList}/>
<MultiSelect objects={this.state.filteredUnselectedObjects} onClickFunction={this.handleSelect}/>
<MultiSelect objects={this.state.selectedObjects} onClickFunction={this.handleUnselect}/>
</div>
);
}
}
const PLAYERS =[
{name: 'Charlie', id: 1},
{name: 'David', id: 2},
{name: 'Eric', id: 3},
{name: 'Emily', id: 4},
{name: 'Peter', id: 5},
{name: 'Sam', id: 6},
{name: 'Doug', id: 7}
]
React.render(<DoubleMultiselect objects={PLAYERS}/>, document.getElementById('app'));