How to check if Dom Element or React Component

Question

When creating an HOC I'm not sure which kind of component will be wrapped, sometimes it is another React Component, sometimes it could be a plain DOM Element as li and a.

WrappedComp = myHOC(BaseComponent)

MyHOC will pass extra props to the wrapped component and in most of the cases this will work as it should.

But sometimes when BaseComponent is for example an li it will not accept the extra props and React will throw a warning Unkown Prop Warning saying that DOM element do not accept non-standard dom attributes: https://facebook.github.io/react/warnings/unknown-prop.html

So how could I check if BaseComponent is a DOM element or else? In case it is I will not pass the extra props to it.

Is there a better way to do this?

Why do you need to wrap the HOC over every component? Is it possible to wrap and export the components which you want to extend with it? — hazardous
– hazardous, Commented Apr 12, 2017 at 10:41
Easiest check is to see if its a function, typeof(BaseComponent) == "function", as for HTML components, react uses a string. — hazardous
– hazardous, Commented Apr 12, 2017 at 10:42
This check alone won't solve the issue though as React will give you these warnings over any component which has propTypes defined. — hazardous
– hazardous, Commented Apr 12, 2017 at 10:44

Kaffekoppen · Accepted Answer · 2021-10-21 09:13:51Z

10

Short answer:
Check if element is of type string to check if element is a DOM element.
Check if element is of type function to check if element is a React component.

Example:

  if (typeof BaseComponent.type === 'string') {
    return BaseComponent
  }
  // add props

Long answer:
As defined in the React documentation, built-in components like <li> or <span> results in a string 'li' or 'span' being passed to React.createElement, e.g. React.createElement("li").
Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

Consequently, a React Component is of type function, while a DOM Component is of type string.

The following WrapperComponent logs the typeof child.type of each child element. The output is function, string, string.

function WrappedComponent({children}) {
  return React.Children.map(children, child => {
    console.log(typeof child.type)
    ...
  })
}

const BaseComponent = ({children}) => children

function App() {
  return (
    <WrappedComponent>
      <BaseComponent>This element has type of function🔥</BaseComponent>
      <span>This element has type of string</span>
      <li>This element has type of string</li>
    </WrappedComponent>
  )
}

edited Oct 21, 2021 at 9:13

answered Jun 22, 2021 at 9:11

Kaffekoppen

4624 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Faris Marouane Over a year ago

I believe this is the correct answer

Gautham Kumaran · Accepted Answer · 2017-04-12 12:44:22Z

4

Check if BaseComponent is a React Component, and add the required props.

if(BaseComponent.prototype.isReactComponent){
    //add props
}

answered Apr 12, 2017 at 12:44

Gautham Kumaran

4415 silver badges16 bronze badges

3 Comments

Leonardo Over a year ago

Any doc about this?

rlemon Over a year ago

github.com/facebook/react/blob/… you can see it in the source code.

Leonardo Over a year ago

I guess internal functions not documented shouldn't be used because they could change anytime. Also this wouldn't work if using pure render functions

Collectives™ on Stack Overflow

How to check if Dom Element or React Component

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related