If I have a ponent that renders the following:

<div>
  <Example/>
  <span>hi</span>
</div>

The property this.props.children will be an array with two elements. When looped over child.type works only for span to return the string span, what property is there that will give me the string Example for a react element?

If I have a ponent that renders the following:

<div>
  <Example/>
  <span>hi</span>
</div>

The property this.props.children will be an array with two elements. When looped over child.type works only for span to return the string span, what property is there that will give me the string Example for a react element?

• javascript
• reactjs

Share Improve this question Follow asked Sep 24, 2015 at 4:14 ThomasReggiThomasReggi 59.7k9797 gold badges259259 silver badges459459 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

If the ponent class has a display name, you should be able to use child.type.displayName. This example demonstrates.

Use this to get the string regardless if it's a native DOM Element or ReactElement.

function getStringType (node) {
  if (typeof node.type === 'string') return node.type
  if (node.type && node.type.displayName) return node.type.displayName
  return false
}