Problem passing children and modifying them

[boazrymland]

We have a React based library, which contains a 'button group toggle' component - a wrapper to a group of Button(s) components (handled to it as children), which modifies them lightly (after checking that they are of the right type) to add a click event handler and attaching an 'active' prop based on the wrapper state.

In React, the code works fine.

However, in Angular using angular-react, it doesn't work as expected: first, the children of the wrapper component are not the buttons themselves but rather the ReactContent element. Next, the even if taking the ReactContent children (this.props.children[0].props['children-to-append']) they are the buttons but their type is not the same type as seen by the code in when we use the library in React directly: the angular type instead of the React type. This causes React to shout when we attempt to modify the children (as mentioned above).

This is how we render the children in the wrapper component:

<ButtonGroupToggle
      #reactNode
      [fill]="fill"
      [minimal]="minimal"
      [large]="large"
      [vertical]="vertical"
      [defaultActive]="defaultActive"
      (onActiveChange)="handleActiveChange($event)">
      <ReactContent>
        <ng-content></ng-content>
      </ReactContent>
</ButtonGroupToggle>

I suspect this is a usage issue more than a bug... .
Any help will be appreciated. TIA!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.