React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<script src="https://npmcdn.com/redux@3.0.4/dist/redux.js"></script>
<script src="https://npmcdn.com/react-redux@4.0.0/dist/react-redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.6/immutable.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

const initialState = {
  renderProperty: "Red Fish",
  getChildrenProperty: "Blue Fish",
}

function MainReducer(state = initialState, action) {
switch (action.type) {
        case 'PROBLEM_CHILD_INSIDE_RENDER':
            return Object.assign({}, state, {
        renderProperty: action.mutatedProperty
      })
      case 'PROBLEM_CHILD_INSIDE_GET_CHILDREN':
            return Object.assign({}, state, {
        getChildrenProperty: action.mutatedProperty
      })
    default:
      return state
    }
}

const store = Redux.createStore(MainReducer);

function mapStateToProps(state) {
    return {
        renderProperty     : state.renderProperty,
        getChildrenProperty : state.getChildrenProperty
    }
}
function mapDispatchToProps(dispatch) {
    return {
        actions: Redux.bindActionCreators(actionCreators, dispatch)
    };
}


class ProblemChild extends React.Component {
constructor() {
        super();
        this.childrenInjected = false;
        this.state = {children: null};
    }
    /**
     * Add children in setDynamicChildren() versus within render()
     */
    componentDidMount() {
        this.setDynamicChildren();
    }
    setDynamicChildren() {
        this.setState({
            children: this.getChildren()
        });
    }
    getChildren() {
        var me = this;
        console.log(this);
        return (
            <div>
                <br/>
                <button style={{marginBottom: '10px'}}
                        onClick={me._handleGetChildrenAction.bind(me)} >UI State Change Action for prop in getChildren()</button>
                <br/>
                <span>prop in getChildren(): <b>{me.props.getChildrenProperty}</b></span>
            </div>
        )
    }
	render() {
		var me = this,
            childrenInjected = me.childrenInjected;
   	console.log(this.props);
        if(me.state.children && !me.childrenInjected) {
            return (
                <div >
                    <button style={{marginBottom:...