CODEWITHSUNDEEP
reactjsreact-i18next
Gabrielle
Gabrielle

Reputation: 840

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

Upvotes: -2

Views: 900

Answers (2)

Gabrielle
Gabrielle

Reputation: 840

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

Upvotes: 0

KFE
KFE

Reputation: 638

In the example below, we're setting Component.displayName on our components so we can access that property in parents. This is a super trivial example that could be expanded to work with an array of children if needed.

const ChildComponent = () => {
    return <div>child render</div>
}

ChildComponent.displayName = "MyComponentName"

const ParentComponent = ({ children }) => {
    // This is the type of component.. should output "MyComponentName"
    const childType = children.type.displayName

    return (
        <div>
            <h1>Render Children</h1>

            {children}
        </div>
    )
}

function App() {
    return (
        <ParentComponent>
            <ChildComponent />
        </ParentComponent>
    )
}

Upvotes: -1

Related Questions