React changing props on grandchildren: object is not extensible / tree traversing react children

I am following a tutorial and cannot get the following code to run.
When I run the following code I get the error Can't add property attachToForm, object is not extensible. Are you no longer to allowed to change child props in this way (ie. with child.props.key = value)? If not can you see a better way of adding a function to nested children only if the element is an input?

React.Children.forEach(children, function (child) {
    if (child.props.name) {

    child.props.attachToForm = this.attachToForm;
        child.props.detachFromForm = this.detachFromForm;
    }
    if (child.props.children) {
        this.registerInputs(child.props.children);
    }
}.bind(this));

I am using es6 if that changes anything but the tutorial can be found here: http://christianalfoni.github.io/javascript/2014/10/22/nailing-that-validation-with-reactjs.html

FormComponent:

'use strict';

import React from 'react';
import BaseComponent from '@client/base-component';

export default class Form extends BaseComponent {

    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        var classString = this.props.className ? this.props.className : '';
        var classArray = ['_common-form', this.props.type ? 'form--' + this.props.type :  'form--basic' ];

        for(var i = 0; i < classArray.length; i++){
            if(classArray[i]){
                classString = classString + ' ' +classArray[i];
            }
        }

        var props = {
            type: this.props.type,
            className: classString,
            style: this.props.style,
            onSubmit: this.props.onSubmit
        };

        return React.createElement(
            'form', 
            props, 
            this.newChildren
        );
    }

    componentWillMount() {
        this.inputs = {}; 
        this.model = {}; 
        this.newChildren = [];
        this.registerInputs(this.props.children);
    }

    registerInputs(children) {
        React.Children.forEach(children, function (child) {
            if (child.props.name) {
                child.props.attachToForm = this.attachToForm;
                child.props.detachFromForm = this.detachFromForm;
            }
            if (child.props.children) {
                this.registerInputs(child.props.children);
            }
        }.bind(this));
    }


    attachToForm(component) {
        this.inputs[component.props.name] = component;
        this.model[component.props.name] = component.state.value;
    }

    detachFromForm(component) {
        delete this.inputs[component.props.name];
        delete this.model[component.props.name];
    }

}

ModalComponent:

'use strict';

import React from 'react';
import Modal from '@client/common/modal';
import Button from '@client/common/buttons';
import AddParticipant from './add_participant'; 
import Form from '@client/common/form_elements';
import Input from '@client/common/form_elements/input.js';
import SlideToggle from '@client/common/form_elements/slide_toggle.js';
import FormField from '@client/common/form_elements/form_field.js';
import FormSection from '@client/common/form_elements/section.js';
import BaseComponent from '@client/base-component'; 

export default class EditTeam extends BaseComponent {

    constructor(props) {
        super(props);
        this.state = { 
            values: {
                name: props.team.name,
                mission: props.team.mission,
                globalSearch: props.team.globalSearch,
                public: props.team.public,
                witcryptSecured: props.team.witcryptSecured
            },
            addParticipantModal: false
        };
    }

    render() {
        var participantsList = [];

        this.props.team.participants.forEach(function(participant) {
            participantsList.push(
                <div className="participant" key={participant.key}>
                    <span className="participant-avatar" style={{backgroundImage:`url("${participant.avatar}")`}}></span>
                    <span>{participant.name}</span>
                    <span className={`${participant.roll}-action roll`}>{participant.roll}<a></a></span>
                </div>
            );
        }.bind(this));

        return ( 
            <Modal className="_common-edit-team-settings" title={`Edit ${this.props.team.name}`} isOpen={this.props.modalIsOpen && this.props.editTeamModal} onCancel={this.props.toggleEditTeamModal} backdropClosesModal>

                <Form onSubmit={this.saveChanges}>      
                    <FormSection className="edit-team-details" sectionHeader="Team Details">
                        <FormField label="Name">
                            <Input name="name" value={this.state.values.name} onChange={this.handleInputChange} type="text" placeholder={this.props.team.name}/>
                        </FormField>
                        <FormField label="Mission">
                            <Input name="mission" value={this.state.values.mission} onChange={this.handleInputChange} type="text" placeholder={this.props.team.kitMission || 'Kit Mission'} multiline />
                        </FormField>
                    </FormSection>

                    <FormSection className="privacy-settings" sectionHeader="Privacy Settings">
                        <FormField label="Included in global search results" >
                            <SlideToggle name="globalSearch" defaultChecked={this.state.values.globalSearch} onChange={this.handleCheckedChange} type="checkbox" />
                        </FormField>
                        <FormField label="Accessible by anyone" >
                            <SlideToggle name="public" defaultChecked={this.state.values.public} onChange={this.handleCheckedChange} type="checkbox" />
                        </FormField>
                        <FormField label="Secured with WitCrypt" >
                            <SlideToggle name="witcryptSecured" defaultChecked={this.state.values.witcryptSecured} onChange={this.handleCheckedChange} type="checkbox" />
                        </FormField>
                    </FormSection>
                    <FormSection sectionHeader="Participants">
                        {participantsList}
                        <div id="add-participant" className="participant" onClick={this.toggleAddParticipantModal}>
                            <span className="participant-avatar" style={{backgroundImage:'url(/img/blue_add.svg)'}}></span>
                            <span>Add a Participant</span>
                            <span className="add-action roll"><a></a></span>
                        </div>
                    </FormSection>
                    <Button type="hollow-primary" size="md" className="single-modal-btn" block submit>Save</Button>
                </Form>


                <AddParticipant people={this.props.people} toggleAddParticipantModal={this.props.toggleAddParticipantModal} modalIsOpen={this.props.modalIsOpen} toggleAddParticipantModal={this.toggleAddParticipantModal} addParticipantModal={this.state.addParticipantModal} />
            </Modal>
        );
    }

    toggleAddParticipantModal() {
        this.setState({
            addParticipantModal: !this.state.addParticipantModal
        });
    }

    handleCheckedChange(event){
        var newState = this.state;
        newState.values[event.target.name] = !newState.values[event.target.name];
        this.setState(
            newState
        );
    }

    handleInputChange(event){
        var newState = this.state;
        newState.values[event.target.name] = event.target.value;
        this.setState(
            newState
        );
    }

    saveChanges(e){
        e.preventDefault(); 
    }

}