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...
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 ''