在React组件内渲染React元素

Question

OK I'm trying to pass a component inside an object I use as a parameters to an action I'm triggering.

this.context.alt.actions.notificationActions.logMessage({
  component: <ModalLayoutEditorComments subscription="pop-up" contextualClass="info" callback={this._submitCaisseChangeAction} />,
  subscription: 'pop-up',
});

Inside the target component I receive the object as props with the component which is now React Element.

Now I would to know how I can convert this React element inside another React component if possible?

  render() {
      const Component = this.props.notifications[0].component;

      return (
        <div>
          {Component}
        </div>
      );
  }

Answer 1

Your render logic is OK. It looks like you are using the wrong prop:

render() {    
  return (
    <div>
      {this.props.notifications[0].component}
    </div>
  );
}

As an aside, component is quite a confusing property name. The object is a React element, which is a description of a Component instance .

Answer 2

The error I was getting was the following

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

I was getting undefined because the mistake I made was I was not exporting the component using export default ModalLayoutEditorComments .