Problem with HTML content presentation using this.props.Children with ngReact

Question

I’m trying to present the content I inject into an Angular directive within an React component.

See below for the call to the component:

<alert type="'danger'">
    <strong>Alert</strong>
    Voluptatem facilis magnam, optio provident eaque earum.
</alert>

See below my Angular/React component:

const ALERT_TYPES = [
    'danger',
    'error', // alias for danger
    'info',
    'primary',
    'success',
    'warning'
];

angular
    .module('app')
    .value('Alert', React.createClass({
        displayName: 'Alert',
        propTypes: {
            children: React.PropTypes.node.isRequired,
            className: React.PropTypes.string,
            type: React.PropTypes.oneOf(ALERT_TYPES).isRequired
        },
        render() {
            var componentClass = classNames(
                'Alert',
                'Alert--' + this.props.type,
                this.props.className
            );

            return (
                <section className={componentClass}>{this.props.children}</section>
            );
        }
    }))
    .directive('alert', alert);

function alert(reactDirective) {
    return reactDirective('Alert');
}

Unfortunately this.props.children returns undefined. Does anyone have any idea how to fix this? Thank you.

Answer 1

As commented on that occasion, that doesn’t work, you need to add the children on the React.js side, so it is possible to rewrite the component. See below for the example in Issue:

let Alert = React.createClass({
  displayName: 'Alert',
  propTypes: {
    heading: React.PropTypes.string,
    text: React.PropTypes.string,
    className: React.PropTypes.string,
    type: React.PropTypes.oneOf(ALERT_TYPES).isRequired
  },
  render() {
    let componentClass = classNames(
      'Alert',
      'Alert--' + this.props.type,
      this.props.className
    );

    return (
      <section className={componentClass}>
         <strong>{this.props.heading}</strong>
         {this.props.text}
       </section>
    );
  }
});

Angular.js' call would look like this:

<alert type="'danger'" heading="Alert" text="Voluptatem facilis magnam, optio provident eaque earum."/>