Do not change props inside of component

src/browser/components/SettingsPage.jsx

@@ -152,6 +152,23 @@ const SettingsPage = React.createClass({
       showUnreadBadge: !this.refs.showUnreadBadge.props.checked
     });
   },
+
+  updateTeam(index, newData) {
+    var teams = this.state.teams;
+    teams[index] = newData;
+    this.setState({
+      teams
+    });
+  },
+
+  addTeam(team) {
+    var teams = this.state.teams;
+    teams.push(team);
+    this.setState({
+      teams
+    });
+  },
+
   render() {
     var teamsRow = (
       <Row>
@@ -161,6 +178,8 @@ const SettingsPage = React.createClass({
             showAddTeamForm={this.state.showAddTeamForm}
             toggleAddTeamForm={this.toggleShowTeamForm}
             onTeamsChange={this.handleTeamsChange}
+            updateTeam={this.updateTeam}
+            addTeam={this.addTeam}
           />
         </Col>
       </Row>

src/browser/components/TeamList.jsx

@@ -9,7 +9,8 @@ const TeamList = React.createClass({
     onTeamsChange: React.PropTypes.func,
     showAddTeamForm: React.PropTypes.bool,
     teams: React.PropTypes.array,
-    toggleAddTeamForm: React.PropTypes.func
+    addTeam: React.PropTypes.func,
+    updateTeam: React.PropTypes.func
   },
 
   getInitialState() {
@@ -110,9 +111,9 @@ const TeamList = React.createClass({
           }}
           onSave={(newTeam) => {
             if (this.props.showAddTeamForm) {
-              this.props.teams.push(newTeam);
+              this.props.addTeam(newTeam);
             } else {
-              this.props.teams[newTeam.index] = newTeam;
+              this.props.updateTeam(newTeam.index, newTeam);
             }
             this.setState({
               showNewTeamModal: false,