Sebastian Olsen Sebastian Olsen - 1 year ago 152
Javascript Question

How to get children type in react

I'm trying to make my own

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 =, 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) {
this.displayName = 'Tab Link'
render() {
return (
<div className="tab-link"></div>

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

never returns "Tab Link", it always returns
, why?

Answer Source

As an alternative you could use

console.log( // this would be 'TabLink'

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download