Menu
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? Currently, I'm doing it by testing typeof obj.type === 'function', but I'm hoping there's a better way.
640
A React element is an object representation of a DOM node. A component encapsulates a DOM tree. Elements are immutable i,e once created cannot be changed. The state in a component is mutable.
React. isValidElement tests true for both React components as well as React elements.
There is certainly a difference between elements and components. Furthermore, a component refers to a small part of a larger entity that mostly is a manufactured object. In contrast, an element is one the simplest parts of which anything consists of.
React Elements With a function component, this element is the object that the function returns. React elements are not what we see in the browser. They are just objects in memory and we can't change anything about them. React elements can have other type properties other than native HTML elements.
React Elements 1 A React Element is what gets returned from components. ... 2 With a function component, this element is the object that the function returns. 3 With a class component, the element is the object that the component’s render function returns. ... 4 React elements are not what we see in the browser. ... More items...
With a function component, this element is the object that the function returns. With a class component, the element is the object that the component’s render function returns. R React elements are not what we see in the browser. They are just objects in memory and we can’t change anything about them.
When React sees an element with a function or class type, it knows to ask that component what element it renders to, given the corresponding props. When it sees this element:
A react element describes what we want to see on the screen. A React element is an object representation of a DOM node. _It's important to make this distinction here because the element is not the actual thing we see on the screen, rather the object representation is what is rendered.
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 <h1>Hello</h1>;
}
}
const foo = <Foo />;
//FUNCTIONAL COMPONENT
function Bar (props) { return <h1>World</h1> }
const bar = <Bar />;
// REACT ELEMENT
const header = <h1>Title</h1>;
// CHECK
isReactComponent(Foo); // true
isClassComponent(Foo); // true
isFunctionComponent(Foo); // false
isElement(Foo); // false
isReactComponent(<Foo />) // false
isElement(<Foo />) // true
isDOMTypeElement(<Foo />) // false
isCompositeTypeElement(<Foo />) // true
isReactComponent(Bar); // true
isClassComponent(Bar); // false
isFunctionComponent(Bar); // true
isElement(Bar); // false
isReactComponent(<Bar />) // false
isElement(<Bar />) // true
isDOMTypeElement(<Bar />) // false
isCompositeTypeElement(<Bar />) // true
isReactComponent(header); // false
isElement(header); // true
isDOMTypeElement(header) // true
isCompositeTypeElement(header) // false
Example Codepen
91
The simplest solution is:
React.isValidElement(element)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
