react + redux. can i dispatch an action that will take a component and have another component render it via this.props.children?

Question

Say I have a simple component..

const SimpleComponent = () => {
  return (
    <p>Hello!</p>
  );
}

If I import SimpleComponent into some component, and then dispatch an action like this:

this.props.dispatch(someActionOfMine(SimpleComponent));

How can I have another component render this component inside of it as this.props.children ?

For example, here's AnotherComponent :

class AnotherComponent extends React.Component {
  render() {
    return (
      {React.cloneElement(this.props.children, { ...this.props })}
    );
  }
}

And it might be used like this, in some component's render:

render() {
  return (
    <AnotherComponent>{this.props.somePieceOfState.component}</AnotherComponent>
  );
}

Can this work? I'm trying it but it provides this error:

invariant.js:44 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Answer 1

Never mind I'm an idiot. You need to pass the component like this: this.props.dispatch(someAction(<SomeComponent />))