title: undefined on passing data as props
body: <p>I am getting <code>undefined</code> at <code>user.login</code> and <code>user.bio</code>, unable to pass
  data to <code>UserInfo</code> component from App.js. As Im not passing any state
  its just props.</p>
  
  <p>App.js</p>
  
  <pre><code>render() {
                  return (
                    &lt;div&gt;
                      &lt;nav className="uk-navbar-container uk-margin" uk-navbar="true"&gt;
                        &lt;div className="uk-navbar-left"&gt;
  
                          &lt;a className="uk-navbar-item uk-logo" href="/"&gt;  Github search  &amp;nbsp;
                            &lt;span uk-icon="icon: github; ratio: 2.2" className="uk-margin-large-right"&gt;&lt;/span&gt;
                          &lt;/a&gt;
                          &lt;div className="uk-navbar-item  uk-navbar-right"&gt;
  
                            &lt;form onSubmit={this.submitUser}&gt;
                              &lt;input className="uk-input uk-form-width-medium"
                                type="text" placeholder="Github UserName...."
                                id="username" onKeyUp={this.onChange} ref="username"&gt;&lt;/input&gt;
                              &amp;nbsp;&amp;nbsp;
                              &lt;button className="uk-button uk-button-primary"&gt;Search &amp;nbsp;
                              &lt;span uk-icon="search" className="uk-margin-small-right"&gt;&lt;/span&gt;
                              &lt;/button&gt;
                            &lt;/form&gt;
  
                          &lt;/div&gt;
                          &lt;div className="uk-navbar-item  uk-navbar-right"&gt;&lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/nav&gt;
                      &lt;div className="uk-container-large"&gt;
                        &lt;UserInfo name={this.props.username} /&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  );
                }
  </code></pre>
  
  <p>UserInfo.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class UserInfo extends Component {
      constructor(props) {
          super(props)
          this.state = { userList: [] }
      }
  
      componentDidMount() {
          console.log('in child =' + this.props.name)
          fetch('https://api.github.com/users/${this.props.name}')
              .then(res =&gt; res.json())
              .then(userList =&gt; {
                  this.setState({ userList: userList })
                  console.log('data is :' + userList);
              });
      }
  
      render() {
          if (!this.state.userList) {
              return (&lt;div className="uk-child-width-1-3@s uk-grid-match"&gt;Loading...&lt;/div&gt;)
          }
          const user = this.state.userList;
  
          return (
              &lt;div className="uk-child-width-1-3@s uk-grid-match" uk-grid="true"&gt;
  
                  &lt;h3&gt; {user.login} &lt;/h3&gt;
                  &lt;h3&gt;{user.bio}&lt;/h3&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default UserInfo;
  </code></pre>