How to detect a React component vs. a React element?

Question

React.isValidElement tests true for both React components as well as React elements. How would I test, specifically, that an object is a React component? Curren

Answer 1

If you really want to type check for

• component vs element

• class vs functional component

• DOM vs Composite Element

You could try something like this.

function isClassComponent(component) {
    return (
        typeof component === 'function' && 
        !!component.prototype.isReactComponent
    )
}

function isFunctionComponent(component) {
    return (
        typeof component === 'function' && 
        String(component).includes('return React.createElement')
    )
}

function isReactComponent(component) {
    return (
        isClassComponent(component) || 
        isFunctionComponent(component)
    )
}

function isElement(element) {
    return React.isValidElement(element);
}

function isDOMTypeElement(element) {
    return isElement(element) && typeof element.type === 'string';
}

function isCompositeTypeElement(element) {
    return isElement(element) && typeof element.type === 'function';
}

USE

// CLASS BASED COMPONENT
class Foo extends React.Component {
  render(){
      return 
Hello
;
  }
}

const foo = ;

//FUNCTIONAL COMPONENT
function Bar (props) { return 
World
 }
const bar = ;

// REACT ELEMENT
const header = 
Title
;

// CHECK
isReactComponent(Foo); // true
isClassComponent(Foo); // true
isFunctionComponent(Foo); // false
isElement(Foo); // false

isReactComponent() // false
isElement() // true
isDOMTypeElement() // false
isCompositeTypeElement() // true

isReactComponent(Bar); // true
isClassComponent(Bar); // false
isFunctionComponent(Bar); // true
isElement(Bar); // false

isReactComponent() // false
isElement() // true
isDOMTypeElement() // false
isCompositeTypeElement() // true

isReactComponent(header); // false
isElement(header); // true
isDOMTypeElement(header) // true
isCompositeTypeElement(header) // false

Example Codepen