Maximum call stack überschritten Fehler in ReactJS. Kann mir jemand erklären, was Los ist??? (Snippet auf JSFiddle)

Ich bin neu ReactJS und versuchte, meine Hände auf ein einfaches Projekt. Im Grunde, das snippet erstellen Sie eine Liste von Freunden aus einem array und gibt die Gesamtzahl der Freunde.

Aus irgendeinem Grund, ich bemerkte, dass die incrementFriendsCount Funktion löst ein "Maximum call stack überschritten Fehler", wenn ich einen neuen Freund

Das code-snippet unten ist auch verfügbar auf JSFiddle.

JS:

var HelloUser = React.createClass({
  getInitialState: function() {
    return {
      name: "Toyosi",
      friends: ["Susanna", "Jibola", "Worreva"],
      friendsCount: 0
    }
  },
  addFriends: function(friend) {
    this.setState({
      friends: this.state.friends.concat([friend])
    });
  },
  componentWillMount: function() {
    this.setState({
      friendsCount: this.state.friends.length
    });
  },
  incrementFriendsCount: function() {
    this.setState({
      friendsCount: this.state.friends.length
    });
  },
  render: function() {
    return ( < div >
      Villain: {
        this.state.name
      }, No of friends: {
        this.state.friendsCount
      } < br / >
      < AddingTheFriend addNew = {
        this.addFriends
      }
      incCount = {
        this.incrementFriendsCount
      }
      />
        <ListFriends enemies={this.state.friends} / >
      < /div>
    );
  }
});

var ListFriends = React.createClass({
    propTypes: {
    	enemies: React.PropTypes.array.isRequired
    },
    render: function() {
    	var allFriends = this.props.enemies.map(function(friend){
        	return <li>{friend}</li > ;
    });

  return ( < div > Her evil friends:
    < ul > {
      allFriends
    } < /ul>
            </div >
  )
}
});

var AddingTheFriend = React.createClass({
      getInitialState: function() {
        return {
          newFriend: ''
        }
      },
      propTypes: {
        addNew: React.PropTypes.func.isRequired
      },
      updateNewFriend: function(change) {
        this.setState({
          newFriend: change.target.value
        });
      },
      addTheFriend: function() {
        this.props.addNew(this.state.newFriend);
        this.setState({
          newFriend: ''
        })
      },
      componentWillReceiveProps: function() {
        this.props.incCount();
      },
      render: function() {
          return ( < div >
            < input type = "text"
            value = {
              this.state.newFriend
            }
            onChange = {
              this.updateNewFriend
            }
            />
                <button type="button" onClick={this.addTheFriend}>Add Friend</button >
            < /div>
        )
    }
});
React.render(<HelloUser / > , document.getElementById('app'));

HTML:

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

<div id="app"></div>

Ich werde es begrüßen, wenn jemand könnte werfen mehr Licht auf, warum dieser Fehler geworfen wird.