title: ReactJS: Can not type into input field
body: <p>I am starting to learn react and download and follow any tutorials in internet. I am trying to build friend list.<br>
  I have tree components,</p>
  
  <p>friends_container:</p>
  
  <pre><code>import React from 'react';
  import AddFriend from './add_friend.jsx'
  import ShowList from './show_list.jsx'
  
  class FriendsContainer extends React.Component {
  
      constructor() {
          this.state = {
              friends: ['Jake Lingwall', 'Murphy Randall', 'Merrick Christensen']
          }
      }
  
      addFriend(friend) {
          this.setState({
              friends: this.state.friends.concat([friend])
          });
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;h3&gt; Add your friend to friendslist &lt;/h3&gt;
                  &lt;AddFriend addNew={this.addFriend}/&gt;
                  &lt;ShowList names={this.state.friends}/&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default FriendsContainer;
  </code></pre>
  
  <p>add_friend:</p>
  
  <pre><code>import React from 'react';
  
  class AddFriend extends React.Component {
  
      constructor() {
          this.state = {newFriend: ''};
      }
  
      updateNewFriend(e) {
          this.setState({
              newFriend: e.target.value
          })
      }
  
      handleAddNew() {
          this.props.addNew(this.state.newFriend);
          this.setState({
              newFriend: ''
          });
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;input type="text" value={this.state.newFriend} onChange={this.updateNewFriend}/&gt;
                  &lt;button onClick={this.handleAddNew}&gt;Add Friend&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  }
  
  AddFriend.propTypes = { addNew: React.PropTypes.func.isRequired };
  
  export default AddFriend;
  </code></pre>
  
  <p>show_list:</p>
  
  <pre><code>import React from 'react';
  
  class ShowList extends React.Component {
  
      render() {
          var listItems = this.props.names.map((f, i) =&gt; &lt;li key={i}&gt;{f}&lt;/li&gt;);
          return (
              &lt;div&gt;
                  &lt;h3&gt;Friends&lt;/h3&gt;
                  &lt;ul&gt;
                      {listItems}
                  &lt;/ul&gt;
              &lt;/div&gt;
          )
      }
  }
  
  ShowList.defaultProps = { names: [] };
  
  
  export default ShowList;  
  </code></pre>
  
  <p>and app.jsx</p>
  
  <pre><code>import React from 'react';
  import FriendsContainer from './components/friends_container.jsx';
  
  window.React = React;
  
  React.render(&lt;FriendsContainer /&gt;, document.body);
  </code></pre>
  
  <p>as you can see on the code, I am using es6 and babel as transcompiler.<br>
  My problem, I can not type any letters into the input field to add new friend into friends list. What am I doing wrong?</p>