title: setState won't update React clock
body: <p>I'm currently building a simple app in React and I'm still relatively new to it, so I feel that my solution is a simple one that I just don't have the experience to see quite yet. </p>
  
  <p>Basically the app allows a user to type in the name of any city in the world and the output updates the React live clock component that's underneath the input. For this I'm using the city timezones library to fetch the data for the user's desired city, the moment.js to parse the city time into the desired timezone and of course, the React live clock to display the actual time to the user. </p>
  
  <p>Inside of my <code>loadTime</code> function I've retrieved the timezone property and passed it into my <code>moment().tz()</code> method for parsing. After I pass <code>state</code> into my <code>setState()</code> and printing the updated state to the console, it does indeed display the correct state. For example, the user types Tokyo and the key/value <code>timezone: "Asia/Tokyo"</code> is returned. </p>
  
  <p>My problem is that after passing <code>this.state.timezone</code> into my React live clock components <code>timezone</code> attribute and the Get time button is clicked, my clock doesn't actually update the state and instead, remains the current time of the user's browser.</p>
  
  <p>I've established that my <code>loadTime()</code> function works as it's supposed to, so I'm led to believe that my Clock component isn't wired correctly to read the updated <code>timezone</code> state. Another possibility, as stated in my question, is that I'm using <code>setState()</code> incorrectly.  </p>
  
  <p>Is there something that I'm overlooking here or am I on the right track with misuse of <code>setState()</code>?</p>
  
  <pre><code>
  import Moment from 'moment-timezone';
  import cityTimezones from 'city-timezones';
  import Clock from 'react-live-clock';
  let moment = require('moment-timezone');
  
  export default class Search extends Component {
  
    state = {
      userLocation: "",
      localTime: "",
      rows: [],
  
    };
  
    //Methods
    loadTime = (searchTerm) =&gt; {
      const city = cityTimezones.lookupViaCity(searchTerm);
      let state = this.state; 
      if (city.length &gt; 0) { 
        const timezone = city[0].timezone;    
        let now = moment().tz(timezone).format('h:mm:ss a');           
        state.localTime = now;         
        state.timezone = timezone;   
      } else {
        state.userLocation = "";
        state.localTime = "";
      };
      this.setState(state);  
      console.log(state);      
    };
  
      handleChange = (e) =&gt; {
        let state = this.state;
        state[e.target.name] = e.target.value;
        this.setState(state);   
      }
  
      //Create
      handleClick = (e) =&gt; {
        e.preventDefault();
        this.loadTime(this.state.userLocation);
      };
  
      render () {
        let alert = (!this.state.localTime) ? "Please enter location": "";
  
        return (
          &lt;div className="search-container-fluid gradient p-3"&gt;
            &lt;div className="row"&gt;
              &lt;div className="search-container"&gt;
                  &lt;input onChange={this.handleChange} name="userLocation" type="text" 
                   className="form-control" placeholder="Enter a location" /&gt;
                  &lt;button onClick={this.handleClick} name="search-btn" className="btn btn-search" 
                   type="button" &gt;Get time.&lt;/button&gt;
                &lt;div className="output-container mt-5"&gt;
                  &lt;Clock ticking={true} format={'hh:mm:ss a'} timezone={this.state.timezone} /&gt;                             
                  {/* {alert} */}
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        )
      }
    };``` 
  </code></pre>