When creating an HOC I'm not sure which kind of ponent 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 ponent 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: .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?

When creating an HOC I'm not sure which kind of ponent 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 ponent 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?

• javascript
• reactjs
• dom

• Did you check the output of console.log(BaseComponent) ? – user5734311 Commented Apr 12, 2017 at 10:29
• Why do you need to wrap the HOC over every ponent? Is it possible to wrap and export the ponents which you want to extend with it? – hazardous Commented Apr 12, 2017 at 10:41
• 1 Easiest check is to see if its a function, typeof(BaseComponent) == "function", as for HTML ponents, react uses a string. – hazardous Commented Apr 12, 2017 at 10:42
• 1 This check alone won't solve the issue though as React will give you these warnings over any ponent which has propTypes defined. – hazardous Commented Apr 12, 2017 at 10:44
• 1 related: stackoverflow./questions/33199959/… – rlemon Commented Apr 12, 2017 at 14:46

2 Answers 2

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

Example:

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

Long answer:
As defined in the React documentation, built-in ponents 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 /> pile to React.createElement(Foo) and correspond to a ponent 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