React children issue

00 - README.md

Problem

When using JSX code on a pre-existing piece of code that is using props.children, I am receiving the error Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {})..

Furthur more, the object sent through as this.props.children no longer look like element classes.

Files 01 and 03 shows the code working on a JSBIN sandbox. https://jsbin.com/busaqipeme/edit?js,console,output

Files 02 and 04 show the code from a large react project.

• React: 15.2.1
• ReactDOM: 15.2.1
• ReactTools: 0.13.3

01 - sandbox_code - props.children console log.png

02 - project_code - props.children console log.png

03 - Compiled working code - seen on JSBIN example.js

	var _react = __webpack_require__(1);

	var _react2 = _interopRequireDefault(_react);

	var _reactDom = __webpack_require__(33);

	var _reactDom2 = _interopRequireDefault(_reactDom);

	var _reactAddonsCreateFragment = __webpack_require__(172);

	var _reactAddonsCreateFragment2 = _interopRequireDefault(_reactAddonsCreateFragment);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

	var PageOverlay = function (_React$Component) {
	  _inherits(PageOverlay, _React$Component);

	  function PageOverlay(props) {
	    _classCallCheck(this, PageOverlay);

	    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(PageOverlay).call(this, props));

	    _this.state = {
	      active: props.active
	    };
	    _this.handleClick = _this.handleClick.bind(_this);
	    return _this;
	  }

	  _createClass(PageOverlay, [{
	    key: 'componentWillReceiveProps',
	    value: function componentWillReceiveProps(next) {
	      // change state based on props change
	      this.setState({ active: next.active });
	    }

	    //
	    // Handlers
	    //

	  }, {
	    key: 'handleClick',
	    value: function handleClick() {
	      if (this.props.handleClick) {
	        return this.props.handleClick();
	      }

	      return this.setState({ active: false });
	    }

	    //
	    // Render
	    //

	  }, {
	    key: 'renderOverlay',
	    value: function renderOverlay(children) {
	      return _react2.default.createElement(
	        'div',
	        null,
	        _react2.default.createElement(
	          'div',
	          { className: 'page-overlay', onClick: this.handleClick },
	          _react2.default.createElement(
	            'div',
	            { id: this.props.id, className: 'page-overlay__highlight-area' },
	            children
	          )
	        )
	      );
	    }
	  }, {
	    key: 'render',
	    value: function render() {
	      var child, i, len;

	      for (i = 0, len = this.props.children.length; i < len; i++) {
	        child = this.props.children[i];
	      }

	      var children = _react2.default.Children.toArray(this.props.children);

	      if (this.state.active) {
	        return this.renderOverlay(children);
	      }

	      return _react2.default.createElement(
	        'div',
	        null,
	        children
	      );
	    }
	  }]);

	  return PageOverlay;
	}(_react2.default.Component);

	//
	// Prop Types
	//

	PageOverlay.propTypes = {
	  active: _react2.default.PropTypes.bool,
	  id: _react2.default.PropTypes.string,
	  handleClick: _react2.default.PropTypes.func
	};

	//
	// Default Props
	//

	// children: React.PropTypes.oneOfType([
	//   React.PropTypes.arrayOf(React.PropTypes.node),
	//   React.PropTypes.node,
	// ]),
	PageOverlay.defaultProps = {
	  active: true,
	  id: ''
	};

	var OptIn = function (_React$Component2) {
	  _inherits(OptIn, _React$Component2);

	  function OptIn(props) {
	    _classCallCheck(this, OptIn);

	    var _this2 = _possibleConstructorReturn(this, Object.getPrototypeOf(OptIn).call(this, props));

	    _this2.baseLocale = 'offers.request_discount.';
	    _this2.state = {};
	    return _this2;
	  }
	  //
	  // Click handlers
	  //

	  //
	  // Actions
	  //

	  //
	  // Render methods
	  //

	  _createClass(OptIn, [{
	    key: 'render',
	    value: function render() {
	      var width = 300;
	      var styles = {
	        width: width,
	        position: 'absolute',
	        left: '50%',
	        marginLeft: 0 - width / 2,
	        top: '1em'
	      };

	      return _react2.default.createElement(
	        'div',
	        { style: { position: 'relative' } },
	        _react2.default.createElement(
	          'div',
	          { style: styles },
	          _react2.default.createElement(
	            PageOverlay,
	            null,
	            _react2.default.createElement(
	              'div',
	              null,
	              'working test 1'
	            ),
	            _react2.default.createElement(
	              'div',
	              null,
	              'working test 2'
	            )
	          )
	        )
	      );
	    }
	  }]);

	  return OptIn;
	}(_react2.default.Component);

	OptIn.defaultProps = {
	  privacy_uri: '',
	  terms_uri: ''
	};

	_reactDom2.default.render(_react2.default.createElement(OptIn, null), document.getElementById('app'));

04.1 - Project code (not working) - OptIn Class.js

import React from 'react';
import Plinth from 'plinth';
import classNames from 'classnames';
import { Tag, Success } from '../../../components/common/icons';
import Yaks from 'yaks';

const PageOverlay = React.createFactory(Plinth.Components.PageOverlay);
const TranslationHelper = Plinth.Helpers.TranslationHelper;
const Snowplow = Plinth.Mixins.SnowplowMixin;
const t = TranslationHelper.get;

export default class OptIn extends React.Component {

  constructor(props) {
    super(props);
    this.baseLocale = 'offers.request_discount.';
    this.state = {
    };
  }

  componentWillMount() {
    if (Yaks.UTILS.canUseDOM) {
      TranslationHelper.fetch('offers');
    }
  }

  //
  // Click handlers
  //

  //
  // Actions
  //

  //
  // Render methods
  //


  render() {
    const width = 300;
    const styles = {
      width: width,
      position: 'absolute',
      left: '50%',
      marginLeft: (0 - (width/2)),
      top: '1em',
    };

    return (
      <div style={{position: 'relative'}}>
        <div style={styles}>
          <PageOverlay>
            <div>test</div>
            <div>test</div>
          </PageOverlay>
        </div>
      </div>
    );
  }
}

OptIn.defaultProps = {
  privacy_uri: '',
  terms_uri: '',
};

04.2 - Project code (not working) - PageOverlay Class.js

import React from 'react';
import createFragment from 'react-addons-create-fragment';

export default class PageOverlay extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      active: props.active,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  componentWillReceiveProps(next) {   // change state based on props change
    this.setState({ active: next.active });
  }

  //
  // Handlers
  //

  handleClick() {
    if (this.props.handleClick) {
      return this.props.handleClick();
    }

    return this.setState({ active: false });
  }

  //
  // Render
  //

  renderOverlay(children) {
    return (
      <div>
        <div className="page-overlay" onClick={this.handleClick}>
          <div id={this.props.id} className="page-overlay__highlight-area">
            {children}
          </div>
        </div>
      </div>
   );
  }

  render() {
    const children = React.Children.toArray(this.props.children);

    if (this.state.active) {
      return this.renderOverlay(children);
    }

    return (
      <div>{this.props.children}</div>
    );
  }

}

//
// Prop Types
//

PageOverlay.propTypes = {
  active: React.PropTypes.bool,
  id: React.PropTypes.string,
  handleClick: React.PropTypes.func,
  // children: React.PropTypes.oneOfType([
  //   React.PropTypes.arrayOf(React.PropTypes.node),
  //   React.PropTypes.node,
  // ]),
};

//
// Default Props
//

PageOverlay.defaultProps = {
  active: true,
  id: '',
};