WTF!

Board.js

var Note = React.createClass({
    getInitialState: function () {
        return {
            editing: false,
            text: this.props.children
        }
    },

    edit: function () {
        this.setState({
            editing: true
        });
    },

    save: function () {
        this.setState({
            editing: false,
            text: this.refs.newText.getDOMNode().value
        })
    },

    remove: function () {
        this.props.onRemove(this.props.index);
    },

    renderDisplay: function () {
        return [(
            <p>{this.state.text}</p>
        ), (
            <div className="btn-group">
                <button onClick={this.edit} className="btn btn-primary glyphicon glyphicon-pencil"></button>
                <button onClick={this.remove} className="btn btn-danger glyphicon glyphicon-trash"></button>
            </div>
        )];
    },

    renderForm: function () {
        return [(
            <textarea ref="newText" className="form-control" defaultValue={this.state.text}></textarea>
        ), (
            <button onClick={this.save} className="btn btn-success btn-sm glyphicon glyphicon-floppy-disk"></button>
        )]
    },

    render: function () {
        var dom = this.state.editing ? this.renderForm() : this.renderDisplay();
        return (
            <div className="col-sm-3">
                <div className="panel panel-default">
                    <div className="panel-body">
                        {dom[0]}
                    </div>
                    <div className="panel-footer">
                        {dom[1]}
                    </div>
                </div>
            </div>
        )
    }
});

var Board = React.createClass({
    getInitialState: function() {
        return {
            notes: [
                'Call Bill',
                'Email Lisa',
                'Make dentist appointment',
                'Send proposal'
            ]
        };
    },
    //propTypes: {
    //    count: function(props, propName) {
    //        if(typeof props[propName] !== 'number') {
    //            return new Error('The count property must be a number')
    //        }
    //        if(props[propName] > 100) {
    //            return new Error('Making ' + props[propName] + ' notes is ridiculous.')
    //        }
    //    }
    //},

    remove: function(i) {
        var arr = this.state.notes;
        arr.splice(i, 1);
        this.setState({
            notes: arr
        })
    },

    renderNote: function(note, i) {
        console.log(note);
        return (
            <Note key={i} index={i} onRemove={this.remove}>{note}</Note>
        );
    },

    render: function() {
        return (
            <div className="fluid-container">
                {this.state.notes.map(this.renderNote)}
            </div>
        )
    }
});

React.render(<Board/>, document.getElementById('react-container'));

var Note = React.createClass({
    getInitialState: function () {
        return {
            editing: false,
            text: this.props.text || ''
        }
    },

    edit: function () {
        this.setState({
            editing: true
        });
    },

//CHANGED
    save: function () {
        this.setState({
            editing: false           
        });
        this.props.onSave(this.refs.newText.value, this.props.index);
    },

    remove: function () {
        this.props.onRemove(this.props.index);
    },

//CHANGED
    renderDisplay: function () {
        return [(
            <p>{this.props.text}</p>
        ), (
            <div className="btn-group">
                <button onClick={this.edit} className="btn btn-primary glyphicon glyphicon-pencil"></button>
                <button onClick={this.remove} className="btn btn-danger glyphicon glyphicon-trash"></button>
            </div>
        )];
    },

//CHANGED
    renderForm: function () {
        return [(
            <textarea ref="newText" className="form-control" defaultValue={this.props.text}></textarea>
        ), (
            <button onClick={this.save} className="btn btn-success btn-sm glyphicon glyphicon-floppy-disk"></button>
        )]
    },

    render: function () {
        var dom = this.state.editing ? this.renderForm() : this.renderDisplay();
        return (
            <div className="col-sm-3">
                <div className="panel panel-default">
                    <div className="panel-body">
                        {dom[0]}
                    </div>
                    <div className="panel-footer">
                        {dom[1]}
                    </div>
                </div>
            </div>
        )
    }
});

var Board = React.createClass({
    getInitialState: function() {
        return {
            notes: [
                'Call Bill',
                'Email Lisa',
                'Make dentist appointment',
                'Send proposal'
            ]
        };
    },
    //propTypes: {
    //    count: function(props, propName) {
    //        if(typeof props[propName] !== 'number') {
    //            return new Error('The count property must be a number')
    //        }
    //        if(props[propName] > 100) {
    //            return new Error('Making ' + props[propName] + ' notes is ridiculous.')
    //        }
    //    }
    //},

    remove: function(i) {
        var arr = this.state.notes;
        arr.splice(i, 1);
        this.setState({
            notes: arr
        })
    },

//ADDED
   save: function(text, i) {   
        const arr = this.state.notes.map((note, index) => index === i ? text : note);
        this.setState({
          notes: arr
        });
    },

    renderNote: function(note, i) {
        console.log(note);
//CHANGED
        return (
            <Note key={i} index={i} onRemove={this.remove} onSave={this.save}>{note}</Note>
        );
    },

    render: function() {
        return (
            <div className="fluid-container">
                {this.state.notes.map(this.renderNote)}
            </div>
        )
    }
});

React.render(<Board/>, document.getElementById('react-container'));