isValidElement

constisElement =isValidElement(value)

• Reference
  • isValidElement(value)
• Usage
  • Checking if something is a React element

Reference

isValidElement(value)

CallisValidElement(value) to check whethervalue 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

See more examples below.

Parameters

• value: Thevalue you want to check. It can be any a value of any type.

Returns

isValidElement returnstrue if thevalue is a React element. Otherwise, it returnsfalse.

Caveats

• OnlyJSX tags and objects returned bycreateElement are considered to be React elements. For example, even though a number like42 is a valid Reactnode (and can be returned from a component), it is not a valid React element. Arrays and portals created withcreatePortal are alsonot considered to be React elements.

Usage

Checking if something is a React element

CallisValidElement to check if some value is aReact element.

React elements are:

• Values produced by writing aJSX tag
• Values produced by callingcreateElement

For React elements,isValidElement returnstrue:

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 returnsfalse:

// ❌ 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 needisValidElement. It’s mostly useful if you’re calling another API thatonly accepts elements (likecloneElement 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 anisValidElement check, you probably don’t need it.

functionMyComponent(){
// ... you can return any React node ...
}

functionMyComponent(){
return42;// It's ok to return a number from component
}