This article introduces the React Multiple Select using React Hooks.
I have vendors in various cities who are providing service to their customers. The situation is I need to assign societies to vendors as per their preference. A vendor may provide service to multiple societies in an area.
For this, I used Metronic theme and React hooks – useEffect.
There is a list of vendors and now I want to assign societies to a particular vendor.
To do so I redirected to details of the vendor.
First, select a city, then an area and then I want a filtered list of societies from that area of the city.
Step 1 :
Fetched a list of cities using async-await with useEffect hook.
/* Get list of all Cities */
const apiUrl = API_ENDPOINT + “city_list/”;
useEffect(() => {
const fetchData = async () => {
const result = await axios(apiUrl).then(response => response.data)
.then((data) => {
setData(data.data);
let count = Object.keys(data.data).length;
setcount(count);
})
};
fetchData();
}, []);
/* End Get list of all Cities */
Step 2 :
Fetched a list of areas from the selected city using async-await with useEffect as —>
/* Get area list by City */
const apiUrlArea = API_ENDPOINT + “area_list/”;
useEffect(() => {
let postAreaData=”;
if(formdata.city_id && formdata.city_id !==”){
postAreaData = {city_id:formdata.city_id}
const fetchData = async () => {
const result = await axios.post(apiUrlArea,postAreaData).then(response => response.data)
.then((data) => {
setareadata(data.data);
})
};
fetchData();
}
},[formdata.city_id]);
/* End Get area list by City */
Here formdata contains details of the vendor to edit.
This code will get executed as we change City and we are able to get a list of all areas from the selected city.
Step 3 :
Now I have a city and area , I can get a list of all societies in that area.
/* Get Societies by City & Area */
const apiUrlGetSociety = API_ENDPOINT + “society_list”;
useEffect(() => {
let postCityAreaData = {
area_id:formdata.area_id,
city_id:formdata.city_id,
}
const temp_slist = [];
if(formdata.area_id && formdata.area_id!== ” && formdata.city_id && formdata.city_id!== ” ){
const fetchData = async () => {
const result = await axios.post(apiUrlGetSociety,postCityAreaData).then(response => response.data)
.then((data) => {
data.data.forEach(element => {
const obj_temp = {‘id’:element.id, ‘name’:element.name};
temp_slist.push(obj_temp);
});
setAllSocieties(temp_slist);
setShowLoading(false);
console.log(“allSocieties”);
console.log(temp_slist);
})
};
fetchData();
}
},[formdata.area_id,formdata.city_id]);
/* End Get Societies of Area */
Here I get a list of societies as an array of object – {id,name}
let allSocieties = [ {“id”: 6,”name”: “Abhiruchi”}, {“id”: 2,”name”: “Sahara Society”}, {“id”: 3,”name”: “Satyam Society”},]
Now we have a filtered list of societies with respect to the area from the city.
Step 4 :
To show listing on form I used form-components from Metronics.
( https://keenthemes.com/metronic/preview/react/demo2/google-material/inputs/selects )
The Select component can handle multiple selections. It’s enabled with multiple property.
<FormControl className='form-control'>
<Select
multiple
name = “societies”
id = “societies”
value = { selectedSocieties }
onChange = { handleChange_multiple }
input = { <Input id=”select-multiple-chip” /> }
renderValue = { selected => (
<div className = {classes.chips}>
{ selected.map( s => {
const chipname = allSocieties.find(soc => soc.id === s);
return (chipname
? <Chip
key={s}
label={chipname.name}
className={classes.chip}
data-aaa={JSON.stringify(allSocieties)}
/>
: ”)
})}
</div>
)}
MenuProps={MenuProps}
>
{ allSocieties.map((itemsociety) => (
<MenuItem
key={itemsociety.id}
value={itemsociety}
>
<Checkbox checked={selectedSocieties.includes(itemsociety.id) } />
<ListItemText primary={itemsociety.name} />
</MenuItem>
))}
</Select>
</FormControl>
In the above select component, we have passed selectedSocieties to value attribute.
selectedSocieties is an array of ids of societies which are already assigned to vendor.
I can get list of assigned societies to vendor as –>
useEffect(() => {
setShowLoading(true)
setformdata(props.data)
if(props.data.vendorSociety && props.data.vendorSociety !== ” && props.data.vendorSociety !== ‘undefined’ ){
props.data.vendorSociety.forEach(el => {
const obj = {‘id’:el.id, ‘name’:el.name};
temp_selected_slist.push(el.id);
})
setSelectedSocieties(temp_selected_slist);
}
}, [props.data]);
After selecting one/more societies, handleChange_multiple event bind selected societies data to selectedSocieties . See the following code:
const handleChange_multiple = event =>{
let newitems = event.target.value.filter(t => typeof t !== ‘number’);
let changed = newitems[0].id;
let cleanthis = event.target.value.filter(t => typeof t === ‘number’);
newitems.forEach(i => cleanthis.push(i.id));
const newSelectedItems = selectedSocieties.includes(changed)
? selectedSocieties.filter(v => v !== changed)
: […selectedSocieties, changed];
setSelectedSocieties(newSelectedItems);
}
In the example given in Metronic , handleChange event deals with an array of the name only. In above we are dealing with an array of objects.
In the above code, in handleChange_multiple event, we get newly selected items as an object – newitems {id,name}. Then extract id from it and saved to changed.
Now I can check with changed whether it exist in selectedSocieties.
const newSelectedItems = selectedSocieties.includes(changed)
? selectedSocieties.filter(v => v !== changed)
: […selectedSocieties, changed];
setSelectedSocieties(newSelectedItems);
In above article , we learned how to use multiple select in combination with array of objects and obtain required results.