Sebastian Olsen Sebastian Olsen - 3 months ago 12
Javascript Question

How to get children type in react

I'm trying to make my own

Tabs
component, so that I can use tabs in my app. However I seem to be having issues trying to extract the child components I need by type.

import React from 'react'

export class Tabs extends React.Component {
render() {
let children = this.props.children
let tablinks = React.Children.map(children, x => {
console.log(x.type.displayName) // Always undefined
if (x.type.displayName == 'Tab Link') {
return x
}
})

return (
<div className="tabs"></div>
)
}
}

export class TabLink extends React.Component {
constructor(props) {
super(props)
this.displayName = 'Tab Link'
}
render() {
return (
<div className="tab-link"></div>
)
}
}





<Tabs>
<TabLink path="tab1">Test</TabLink>
<TabLink path="tab2">Test2</TabLink>
</Tabs>


My
console.log
never returns "Tab Link", it always returns
undefined
, why?

Answer

As an alternative you could use

console.log(x.type.name) // this would be 'TabLink'

You don't need to explicitly define displayName in this case.

https://jsfiddle.net/lustoykov/u1twznw7/1/