Create a React component - Multiselect

Create a responsive component  React - Multiselect with search with special requirements for responsiveness

Initial data for filling the component list:

Country (This is a group/parent)

let countryList = [

{id: 1, name: 'Egypt'}, 

{id: 2, name: 'Turkey'}

];

Resorts (This is a nested element/children within the group)

let cityLists = [

{id: 4, name: 'Hurghada', country: 1}, 

{id: 5, name: 'Sharm El Sheikh', country: 1},

{id: 6, name: 'Alanya', country: 2}, 

{id: 7, name: 'Kemer', country: 2},

{id: 8, name: 'Marmaris', country: 2},

{id: 8, name: 'Dalaman', country: 2},

];

Component behavior on wide screens

The component will be embedded in a search form using React. Therefore, it should be completely independent of the environment.

This is how the search form will look on wide screens

Description of the component's work on a wide screen

1. Initial appearance when the page is opened

Clicking the mouse in the search line opens a form for selecting a country or resort under the component

let's call THIS FORM WRAPPER-DIV

This same form opens if we click the mouse on the dropdown button

i.e.

There are scroll bars on the left and right, allowing scrolling of the content

i.e. under the search window opens some <div> consisting of two others filled with lists

ul-->li, with the right one equipped with checkboxes

The behavior of the dropdown form on a wide screen is extremely simple

Clicking on a country in the left half (on the Country) changes the content of the right side (the content of the DIV with resorts)

Here are a few examples of the behavior of this "form"

Each "right" list starts with the checkbox "All resorts", clicking on which selects ALL in the right list or vice versa,  deselects

By pressing the OK button we get an object with the country code and a list of selected resorts

[

{"country": 1}

{"city": [4,5]}

]

"country": - number, country code. Only one country can be selected!

"city" - array, separated by commas. Several resorts can be selected within the chosen country

When changing the country - the list of resorts is automatically replaced with the list of resorts of that country

If the checkbox "All resorts" is unchecked in the right list and OK is pressed, the output will be

[

{"country": 1}

{"city": [undefined]}

]

The button to open the search list works similarly to the OK button

This means that if we have made a selection of resorts or a country, then to remember the selection we just need to either press OK or simply close the list by clicking anywhere

1.1 The component allows searching within itself. The search is performed immediately for both the country and the resort

The output of the search results looks as follows

if no country is found - then the list of found resorts is displayed immediately

If a country is found, it is displayed first in the COUNTRY group list.

And below, in the list of the RESORTS group, the subordinate resorts are displayed

Clicking on the found country opens the familiar form where we can select resorts

Clicking on a resort immediately forms the result and closes the selection form

The result displayed in the search window after the manipulations is as follows

Country, n resort(s)

For example, if I selected Hurghada (This is Egypt), it looks like this

FOR MOBILE

Initial view of the component

when clicking on the component

opens a modal WRAPPER-DIV FOR THE FULL SCREEN OF THE MOBILE

CLICK ON THE COUNTRY AND A div WITH resort checkboxes OPENS

At the bottom, the OK button turns into two

A panel appears at the top with a button - cross

The cross button, the Cancel button, and the Apply button perform the same function - remember what is selected and close the modal window, while also calculating the number of selected resorts

The search works in the mobile application as follows

I enter some text and, for example, a country is found

The found countries are in the "COUNTRIES" group. The group cannot be clicked - it is inactive. You can only click on the country name. Each resort, separated by commas, has the name of its country

In this case, this window opens

Clicking on a resort and we get the result

Modal windows close, and the result of our selection goes into a variable

[

{"country": 1}

{"city": [4]}

]

There are no requirements for CSS regarding fonts, etc.

The main requirement is the functionality of the component.

IMPORTANT when developing not to name the component App or Root

Props

countryList and cityLists should be placed in json files

output of the component through default export