react-i18nextreact-16

React children's when using HOC to wrap parent


I am using React 16.8.6 and I have the following structure:

page.js

<ParentComponent id="testData">
    <ChildComponent value={data => data.text} />
</ParentComponent>

parentComponent.tsx

export default class ParentComponent extends React.PureComponent<IParentProps> {
    ...
    render() {
        const items = this.props.children;
        <MiddleComponent items={items} />
    }
}   

ParentContainer.ts

import { withTranslation } from 'react-i18next';
import ParentComponent from './ParentComponent';

export default withTranslation()(ParentComponent);

I need to know inside of MiddleComponent the element type (not as a String but as a React element since I am going to create a new Element based on it) of each child (so, in this case I should have ChildComponent), but when I inspect with chrome, all my children have a I18nextWithTranslation type...

Any idea how to fix this? Or if this is maybe a known bug?

If I don't use any hoc at all, when I write child.type it returns me ChildComponent(props). But this is not true to when I am using hocs to wrap the parent...


Solution

  • The issue was very stupid...

    I was importing the <ChildComponent> as a default import even though the child was not exported as default.

    Basically

    import ChildComponent from '' instead of import { ChildComponent } from ''