title: Pass state from one component to another in ReactJs
body: <p>I am building a Weather Application, and I need to seperate the Weather card into its own component. So far, while I had the Weather card in my <code>Weather.js</code> file it has been working good. But now I have seperated the Weather card into its own component but I cannot access the state.</p>
  <p>This is my main component where I have my state:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default class Weather extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         error: null,
         isLoaded: false,
         items: [],
         selectedValue: ''
      };
   }
   
   componentDidMount() {
      fetch("http://api.weatherapi.com/v1/forecast.json?key=ca021cd2c43544e0be7112719202206&amp;q=kosovo&amp;days=3")
      .then(res =&gt; res.json())
      .then(
         (result) =&gt; {
            this.setState({
               isLoaded: true,
               items: result
            });
         },
         (error) =&gt; {
            this.setState({
               isLoaded: true,
               error
            });
         }
      );
   }
  
    render() {
      const { error, isLoaded, items } = this.state;
      return (
        &lt;WeatherCard items={this.state}/&gt;
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>This is the other component that I am trying to use the state</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const WeatherCard = (props) =&gt; {
    return (
      &lt;div&gt;
        &lt;h2&gt;Today&lt;/h2&gt;
        &lt;span&gt;{this.props.items.location.country}&lt;/span&gt;
      &lt;/div&gt;
    )
  }</code></pre>
  </div>
  </div>
  </p>
  <p>The error that I get is: undefined has no properties</p>