isValidElement

const isElement = isValidElement(value)

• Referência
  • isValidElement(value)
• Uso
  • Verificando se algo é um Elemento React

Referência

isValidElement(value)

Chame isValidElement(value) para verificar se value é um Elemento React.

import { isValidElement, createElement } from 'react';

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

// ❌ Não Elementos React
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false

Veja mais exemplos abaixo.

Parâmetros

• value: O value que você quer verificar. Pode ser qualquer valor de qualquer tipo.

Retorna

isValidElement retorna true se o value é um Elemento React. Caso contrário, retorna false.

Ressalvas

• Apenas tags JSX e objetos retornados por createElement são considerados Elementos React. Por exemplo, embora um número como 42 seja um nó React válido (e pode ser retornado de um componente), ele não é um Elemento React válido. Arrays e portais criados com createPortal também não são considerados Elementos React.

Uso

Verificando se algo é um Elemento React

Chame isValidElement para verificar se algum valor é um Elemento React.

Elementos React são:

• Valores produzidos ao escrever uma tag JSX
• Valores produzidos ao chamar createElement

Para Elementos React, isValidElement retorna true:

import { isValidElement, createElement } from 'react';

// ✅ Tags JSX são Elementos React
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true

// ✅ Valores retornados por createElement são Elementos React
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // true

Quaisquer outros valores, como strings, números, ou objetos e arrays arbitrários, não são Elementos React.

Para eles, isValidElement retorna false:

// ❌ Esses *não* são Elementos 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

É muito incomum precisar de isValidElement. É principalmente útil se você estiver chamando outra API que apenas aceita elementos (como cloneElement faz) e você quer evitar um erro quando seu argumento não é um Elemento React.

A menos que você tenha alguma razão muito específica para adicionar uma verificação isValidElement, você provavelmente não precisa disso.

function MyComponent() {
  // ... você pode retornar qualquer Nó React ...
}

function MyComponent() {
  return 42; // Tudo bem retornar um número do componente
}