React children's when using HOC to wrap parent

Question

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

What do you mean by you need to know the type of the element? Do you need to know what type of HTML element it is or? — KFE, Jun 20 '19 at 02:45
Also, where at, within this component tree are you trying to gain the type of element? — KFE, Jun 20 '19 at 02:48
Inside render(), I need to get which component is the child. So, if parent has 2 children ‘Child1’ ‘Child2’ I need the type of the component... — Gabrielle, Jun 20 '19 at 02:50
Could you assign a displayName on the component and check against it? See my answer below. — KFE, Jun 20 '19 at 02:52
No, displayName would only give me a String, I need the component function that can be returned by child.type. child.type works the way I need IF there is no HOC element involved — Gabrielle, Jun 20 '19 at 02:53

score 0 · Accepted Answer · answered Jun 20 '19 at 15:47

0

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

answered Jun 20 '19 at 15:47

Gabrielle

812
2
7
28

score -1 · Answer 2 · answered Jun 20 '19 at 02:58

-1

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>
    )
}

answered Jun 20 '19 at 02:58

KFE

637
5
10

As I said in my question, I don’t need a String... so a displayName will not work. I need the function to generate the component. Again, the normal children > child.type behavior works just how I need.... but in my case the issue seems to be the withTranslation and/or any other HOC – Gabrielle Jun 20 '19 at 03:00
On top of that, in order to access your displayName, I would need the exact same ‘type’ I am referring to . But again, this doesn’t work for me because of the withTranslation (or any other HOC) – Gabrielle Jun 20 '19 at 03:41

React children's when using HOC to wrap parent

2 Answers2