Instructor: Edgardo Molina, TA: Silu - Need to submit again (readMe)

README.md

@@ -1,3 +1,5 @@
+# CITY search lab is finished, but github wouldn't allow me to do git push. I will submit again later
+
 # Zip Code React Lab
 
 In this exercise, you will create two React apps:

zip-search/src/App.js

@@ -2,26 +2,74 @@ import React, { Component } from 'react';
 import './App.css';
 
 
-function City(props) {
-  return (<div>This is the City component</div>);
+function City( {data} ) {
+  return (
+    <div>
+      City Name: { data.City }
+      <br />
+      State: { data.State }
+      <ul>
+        <li>Population: { data.EstimatedPopulation}</li>
+      </ul>
+    </div>
+  );
 }
 
+
+
 function ZipSearchField(props) {
-  return (<div>This is the ZipSearchField component</div>);
+  return (
+    /*
+    <div>
+      Zip Code:
+      <input type="text" onChange={ props.changeHandler }></input>
+    </div>
+    */
+    <div>
+      <input onChange={ (e) => props.handleChange(e)} />
+    </div>
+  );
 }
 
 
 class App extends Component {
+
+  state = {
+    zipCode: '',
+    cities: [],
+  }
+
+  zipChange = (event) => {
+    this.setState({ zipCode: event.target.value })
+
+    if(event.target.value.length === 5){
+      fetch('https://ctp-zip-api.herokuapp.com/zip/'+event.target.value)
+      .then(res => res.json())
+      .then(cities => {
+        console.log(cities)
+        this.setState( { cities } );
+      })
+      .catch(err => {
+          this.setState({ cities:[] })
+      })
+    }else{
+      this.setState({ cities:[] })
+    }
+  }
+
   render() {
     return (
       <div className="App">
         <div className="App-header">
           <h2>Zip Code Search</h2>
         </div>
-        <ZipSearchField />
+        <ZipSearchField handleChange={ (e) => this.zipChange(e) }/>
+        <div>Current Zip code is: { this.state.zipCode }</div>
         <div>
-          <City />
-          <City />
+          { this.state.cities.length === 0 ? <h1>No Result</h1> : null }
+          { this.state.cities.map(city => <City data={city} />) }
+
+
         </div>
       </div>
     );