How to Create A Simple Dual ListBox Component In React?

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

Download Source Code from GitHub Repository

Blog

How to Create A Simple Dual ListBox Component In React?

Radheshyam Gupta

Join Our Newsletter. No Spam, Only the good stuff.

Related