|
|
@@ -0,0 +1,71 @@
|
|
|
+import React from 'react';
|
|
|
+import logo from './logo.svg';
|
|
|
+import './App.css';
|
|
|
+
|
|
|
+let CitySelect =cities=>{
|
|
|
+
|
|
|
+ return <select>
|
|
|
+ {cities.cities}
|
|
|
+</select>
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+class CountrySelect extends React.Component{
|
|
|
+
|
|
|
+ constructor(props){
|
|
|
+ super(props)
|
|
|
+ this.state = {countries:{}, cities:[]};
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ viewCities(country){
|
|
|
+ let cityList =[];
|
|
|
+
|
|
|
+ for (let cityName of this.state.countries[country]){
|
|
|
+ cityList.push(<option value={cityName} key={cityList.length -1}>{cityName}</option>)
|
|
|
+ }
|
|
|
+
|
|
|
+ return this.setState({cities:cityList })
|
|
|
+ }
|
|
|
+
|
|
|
+render(){
|
|
|
+
|
|
|
+ let list =[];
|
|
|
+ for (let countryName in this.state.countries){
|
|
|
+
|
|
|
+ list.push(<option value={countryName} key={list.length -1}>{countryName}</option>)
|
|
|
+ }
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <select onChange = {evt=>{this.viewCities(evt.target.value)}}>
|
|
|
+ {list}
|
|
|
+ </select>
|
|
|
+
|
|
|
+ <CitySelect cities={this.state.cities} />
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+componentDidMount(){
|
|
|
+ fetch("https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json")
|
|
|
+
|
|
|
+ .then(res => res.json())
|
|
|
+
|
|
|
+ .then(data => {this.setState({countries:data });
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function App() {
|
|
|
+ return (
|
|
|
+ <div className="App">
|
|
|
+ <CountrySelect />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+export default App;
|
