Go For Live Demo
A ListBox Is Simple form component with multi-selection of list items made easy.
First we create two Data Object Array which we used to Show in ListBox Drop-down List.
export const selectOptionOne = [
{
Name: 'Krishna',
value: 'God'
},
{
Name: 'Tiger',
value: 'Animal'
},
{
Name: 'Ram',
value: 'Load'
},
{
Name: 'Mountan',
value: 'Solid'
},
{
Name: 'Tree',
value: 'Life'
}
];
export const selectOptionTwo = [
{
Name: 'Hanuman',
value: 'GodLover'
},
{
Name: 'Sita',
value: 'Goddes'
},
{
Name: 'Laptop',
value: 'Material'
},
{
Name: 'Shiva',
value: 'Creater'
},
{
Name: 'Buddha',
value: 'KnowledgeOfPeace'
}
];
Now We Design A ListBox and Add its related Function in App.js File .
import { useState } from 'react';
import './App.css';
import { selectOptionOne, selectOptionTwo } from './JsonData';
const App=()=> {
const [firstSelectList, setFirstSelectList] = useState(selectOptionOne);
const [secondSelectList, setSecondSelectList] = useState(selectOptionTwo);
const [temSelectedList, setTemSelectedList] = useState([]);
const [currentSelectedListNm, setCurrentSelectedListNm] = useState('');
const handleChange = (e,lstName) => {
const temp = Array.from(e.target.selectedOptions);
setTemSelectedList(temp);
setCurrentSelectedListNm(() => (lstName))
};
const moveAllValRight = () => {
setFirstSelectList([]);
setSecondSelectList([...firstSelectList, ...secondSelectList]);
setCurrentSelectedListNm(() => (''));
};
const moveAllValLeft = () => {
setSecondSelectList([]);
setFirstSelectList([...firstSelectList, ...secondSelectList]);
setCurrentSelectedListNm(() => (''));
};
const moveSelectedValueRight = () => {
const dataListRight = [];
if (temSelectedList !== null && currentSelectedListNm === 'LeftList') {
let filterList = firstSelectList;
temSelectedList.map((item) =>
(filterList = filterList.filter((x) => x.value !== item.value))
);
setFirstSelectList(filterList);
temSelectedList.map((item) => {
dataListRight.push(
firstSelectList.find((data) => (
data.value === item.value
))
);
});
setSecondSelectList([...secondSelectList, ...dataListRight]);
setTemSelectedList(null);
}
};
const moveSelectedValueLeft = () => {
const dataListLeft = [];
if (temSelectedList !== null && currentSelectedListNm ==='RightList') {
let filterList = secondSelectList;
temSelectedList.map(
(item) => (filterList = filterList.filter((x) => x.value !== item.value))
);
setSecondSelectList(filterList);
temSelectedList.map((item) => {
dataListLeft.push(
secondSelectList.find((data) => (
data.value === item.value
))
);
});
setFirstSelectList([...firstSelectList, ...dataListLeft]);
setTemSelectedList(null);
}
};
return (
<>
<div className='select-parent'>
<div className='SelctDiv'>
<select className='select-tag' name="cars" multiple aria-label="label for the select Left" onChange={(e) => {
handleChange(e,'LeftList');
}}>
{firstSelectList.map((data, index) => (
< option key={index + data.value} value={data.value} >{data.Name}</option>
))
}</select>
</div>
<div className='select-btn-div'>
<button onClick={() => { moveAllValRight() }}>{`>>`}</button>
<button onClick={() => { moveSelectedValueRight() }}>{`>`}</button>
<button onClick={() => { moveSelectedValueLeft() }}>{`<`}</button>
<button onClick={() => { moveAllValLeft() }}>{`<<`}</button>
</div>
<div className='SelctDiv'>
<select className='select-tag' name="cars" multiple aria-label="label for the select Right" onChange={(e) => {
handleChange(e, 'RightList');
}}>
{secondSelectList.map((data, index) => (
< option key={index + data.value} value={data.value} >{data.Name}</option>
))
}
</select>
</div>
</div>
</>
);
}
export default App;
Now Add Style File in App.css
.select-parent{
width:500px;
height:250px;
display:flex;
margin-left: 32%;
margin-top: 69px;
}
.SelctDiv{
width:40%;
height:100%;
}
.select-tag {
width: 100%;
height: 100%;
}
.select-tag option{
margin:5px;
}
.select-btn-div {
width: 20%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px;
}
.select-btn-div button{
margin-bottom:10px;
}
Well done! Finally Create ListBox Component For our React Website !
Drop some love by liking or commenting ♥
Reference w3schools
Top comments (0)