isValidElement

const isElement = isValidElement(value)

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

Referencia

isValidElement(value)

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

import { isValidElement, createElement } from 'react';

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

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

Ver más ejemplos abajo.

Parámetros

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

Devuelve

isValidElement devuelve true si 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 de React válido. Los arrays y portales creados con createPortal tampoco se consideran elementos de React.

Uso

Comprobar si algo es un elemento de React

Llama isValidElement para comprobar si algún valor es un elemento 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 />)); // verdadero
console.log(isValidElement(<MyComponent />)); // verdadero

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

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)); // falso
console.log(isValidElement(25)); // falso
console.log(isValidElement('Hola')); // falso
console.log(isValidElement({ age: 42 })); // falso
console.log(isValidElement([<div />, <div />])); // falso
console.log(isValidElement(MyComponent)); // falso

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.

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

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