title: Unable to set state interface and pass props to other components in react typescript
body: <p>I am new to typescript, I am making a weather app using open weather API, I am giving a call to API and setting the state of API response (<code>weatherData</code> here), but the typescript is not allowing me to pass the state as props to other component and gives error <code>Property 'name' does not exist on type 'Object'</code>. I previously made weather app using react js and didn't face any problem but this react typescript really sucks, very difficult to deal with types, please help me.</p>
  <p>Am I not using best practices of typescript? please suggest any resources.</p>
  <pre><code>import React, { Component, Fragment } from &quot;react&quot;;
  import { Search } from './Search';
  import { CityAndDate } from &quot;./CityAndDate&quot;;
  import { Status } from &quot;./Status&quot;;
  import { TemperatureMsg } from &quot;./TemperatureMsg&quot;; 
  import { SunriseAndSunset } from &quot;./SunriseAndSunset&quot;;
  import { Details } from &quot;./Details&quot;;
  import axios from &quot;axios&quot;;
  import './app.scss';
  
  interface AppProps {};
  
  interface ApiResponse {
    response: object;
    data: object;
  };
  
  interface AppState {
    weatherData: Object;
  };
  
  class App extends Component&lt;AppProps, AppState&gt; {
    constructor(props: AppProps) {
      super(props);
      this.state = {
        weatherData: {}
      }
    }
  
    enterKeyPress = (searchValue: string): void =&gt; {
      console.log(searchValue, 'searchValue');
      const getWeatherDataByCity = async (city: string) =&gt; {
        const response: ApiResponse = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&amp;appid=#######&amp;units=metric`);
        this.setState({ weatherData:  response.data });
      }
      getWeatherDataByCity(searchValue);
    }
  
    render() {
      console.log(this.state, 'state')
      const { weatherData } = this.state;
      return(
        &lt;Fragment&gt;
          &lt;div className=&quot;row justify-content-lg-end justify-content-md-end justify-content-sm-center&quot;&gt;
            &lt;div className=&quot;col-lg-2 col-md-4 col-sm-4&quot;&gt;&lt;Search enterKeyPress={this.enterKeyPress} /&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;container&quot;&gt;
            &lt;div className=&quot;row justify-content-center m-3&quot;&gt;
              &lt;div className=&quot;col-lg-3 col-md-4 col-sm-4&quot;&gt;
                &lt;CityAndDate city={weatherData.name}  /&gt;    // Getting error here
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;row justify-content-lg-start justify-content-md-start justify-content-sm-center small-screen-container mt-5&quot;&gt;
              &lt;div className=&quot;col-lg-3 col-md-4 col-sm-4&quot;&gt;&lt;Status /&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;row justify-content-lg-between justify-content-md-between justify-content-sm-center mt-2&quot;&gt;
              &lt;div className=&quot;col-lg-3 col-md-4 col-sm-8&quot;&gt;&lt;TemperatureMsg /&gt;&lt;/div&gt;
              &lt;div className=&quot;col-lg-3 col-md-4 col-sm-8 sm-mt-10&quot;&gt;&lt;SunriseAndSunset /&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div className=&quot;row mt-5&quot;&gt;
              &lt;div className=&quot;&quot;&gt;&lt;Details /&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/Fragment&gt;
      );
    }
  }
  
  export default App;
  
  </code></pre>