isValidElement
isValidElement
checks whether a value is a React element.
const isElement = isValidElement(value)
Reference
isValidElement(value)
Call isValidElement(value)
to check whether value
is a React element.
import { isValidElement, createElement } from 'react';
// ✅ React elements
console.log(isValidElement(<p />)); // true
console.log(isValidElement(createElement('p'))); // true
// ❌ Not React elements
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false
Parameters
value
: Thevalue
you want to check. It can be any a value of any type.
Returns
isValidElement
returns true
if the value
is a React element. Otherwise, it returns false
.
Caveats
- Only JSX tags and objects returned by
createElement
are considered to be React elements. For example, even though a number like42
is a valid React node (and can be returned from a component), it is not a valid React element. Arrays and portals created withcreatePortal
are also not considered to be React elements.
Usage
Checking if something is a React element
Call isValidElement
to check if some value is a React element.
React elements are:
- Values produced by writing a JSX tag
- Values produced by calling
createElement
For React elements, isValidElement
returns true
:
import { isValidElement, createElement } from 'react';
// ✅ JSX tags are React elements
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true
// ✅ Values returned by createElement are React elements
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // true
Any other values, such as strings, numbers, or arbitrary objects and arrays, are not React elements.
For them, isValidElement
returns false
:
// ❌ These are *not* React elements
console.log(isValidElement(null)); // false
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false
console.log(isValidElement([<div />, <div />])); // false
console.log(isValidElement(MyComponent)); // false
It is very uncommon to need isValidElement
. It’s mostly useful if you’re calling another API that only accepts elements (like cloneElement
does) and you want to avoid an error when your argument is not a React element.
Unless you have some very specific reason to add an isValidElement
check, you probably don’t need it.
Derinlemesine İnceleme
When you write a component, you can return any kind of React node from it:
function MyComponent() {
// ... you can return any React node ...
}
A React node can be:
- A React element created like
<div />
orcreateElement('div')
- A portal created with
createPortal
- A string
- A number
true
,false
,null
, orundefined
(which are not displayed)- An array of other React nodes
Note isValidElement
checks whether the argument is a React element, not whether it’s a React node. For example, 42
is not a valid React element. However, it is a perfectly valid React node:
function MyComponent() {
return 42; // It's ok to return a number from component
}
This is why you shouldn’t use isValidElement
as a way to check whether something can be rendered.