JSFiddle - React, Tailwind, and code Playground

by Bhavin Surela

JavaScript

var geos =[
    {
        "name": "United States of America",
        "states": [
            {
                "name": "California",
                "cities": [
                    {
                        "name": "San Francisco"
                    },
                    {
                        "name": "San Jose"
                    }
                ]
            },
            {
                "name": "New York",
                "cities": [
                    {
                        "name": "New York City"
                    },
                    {
                        "name": "Broklyn"
                    }
                ]
            }
        ]
    },
    {
        "name": "India",
        "states": [
            {
                "name": "Maharastra",
                "cities": [
                    {
                        "name": "Mumbai"
                    },
                    {
                        "name": "Pune"
                    }
                ]
            },
            {
                "name": "New Delhi"
            }
        ]
    }
];

/* use thi data to create a part of the form where user can select and drill down to countries, states or available cities. When a country is selected, all underlying states and cities should be selected and vice versa, When all cities under a state are selected, the state should be selectd automatically and when all states are selected the country should be selected automatically */

/*
The selection can be made as smiple as using a checkbox. You can use any library like jqurey or angular for your convenience 
*/



/*
Extra: provide a button that will return minimal value, example if new york and california is selected then it should return only 'United States of America' but if Everything is selected except Broklyn, it should return 'California, New York City, India'

*/