isValidElement

isValidElement comprueba si un valor es un elemento de React.

const isElement = isValidElement(value)

Uso
- Comprobar si algo es un elemento de React
Referencia
- isValidElement(value)

Uso

Comprobar si algo es un elemento de React

Llama isValidElement para comprobar si algun valor es un element de React.

Los elementos de React son:

Los valores producidos al escribir una etiqueta JSX
Los valores producidos por llamar createElement

Para los elementos de React, isValidElement devuelve true:

import { isValidElement, createElement } from 'react';

// ✅ Las etiquetas JSX son elementos de React
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true

// ✅ Los valores devueltos por createElement son elementos de React
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // true

Cualquier otro valor, como strings, números u objetos arbitrarios y arrays, no son elementos de React.

Para ellos, isValidElement devuelve false:

// ❌ Estos *no* son elementos de React
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

Es muy poco común necesitar isValidElement. Es más útil si estás llamando a otra API que sólo acepta elementos (como hace cloneElement y quieres evitar un error cuando tu argumento no es un elemento de React.

A menos que tengas alguna razón muy específica para añadir una comprobación con isValidElement, probablemente no la necesites.

Deep Dive

Elementos de React vs nodos de React

Cuando escribas un component, puedes devolver cualquier tipo de nodo React de el:

function MyComponent() {
  // ... puedes devolver cualquier nodo de React ...
}

Un nodo de React puede ser:

Un elemento de React creado como <div /> o createElement('div')
Un portal creado con createPortal
Un string
Un número
true, false, null, o undefined (que no se visualizan)
Un array de otros nodos de React

Nota que isValidElement comprueba si el argumento es un elemento de React, no si es un nodo de React. Por ejemplo, 42 no es un elemento de React válido. Sin embargo, es un nodo de React perfectamente válido:

function MyComponent() {
  return 42; // Está bien devolver un número del componente
}

Por eso no deberías usar isValidElement como forma de comprobar si algo puede ser renderizado.

Referencia

`isValidElement(value)`

Llama a isValidElement(value) para comprobar si value es un elemento de React.

import { isValidElement } from 'react';

// ✅ Elementos de React
console.log(isValidElement(<p />)); // true
console.log(isValidElement(createElement('p'))); // true

// ❌ No son elementos de React
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false

Ver más ejemplos arriba.

Parámetros

value: El valor que desea comprobar. Puede ser cualquier valor de cualquier tipo.

Devuelve

isValidElement devuelve true si el value es un elemento de React. En caso contrario, devuelve false.

Advertencias

Sólo las etiquetas JSX y los objetos devueltos por createElement se consideran elementos de React. Por ejemplo, aunque un número como 42 es un nodo de React válido (y puede ser devuelto desde un componente), no es un elemento React válido. Los arrays y portales creados con createPortal tampoco se consideran elementos React.

PreviousFragment (<>...</>)Nextlazy