isValidElement

const isElement = isValidElement(value)

• Référence
  • isValidElement(value)
• Utilisation
  • Vérifier si quelque chose est un élément React

Référence

isValidElement(value)

Appelez isValidElement(value) pour vérifier si value est un élément React.

import { isValidElement, createElement } from 'react';

// ✅ Éléments React
console.log(isValidElement(<p />)); // true
console.log(isValidElement(createElement('p'))); // true

// ❌ Pas des éléments React
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false

Voir d’autres exemples ci-dessous.

Paramètres

• value : la valeur que vous souhaitez vérifier. Elle peut être de n’importe quel type.

Valeur renvoyée

isValidElement renvoie true si value est un élément React. Dans le cas contraire, elle renvoie false.

Limitations

• Seuls les balises JSX et les objets renvoyés par createElement sont considérés comme des éléments React. Par exemple, même si un nombre comme 42 est un nœud React valide (et peut être renvoyé par un composant), il ne constitue pas un élément React valide. Les tableaux et les portails créés par createPortal ne sont pas non plus considérés comme des éléments React.

Utilisation

Vérifier si quelque chose est un élément React

Appelez isValidElement pour vérifier si une valeur est un élément React.

Les éléments React sont :

• Les valeurs produites en écrivant une balise JSX
• Les valeurs produites en appelant createElement

Pour les éléments React, isValidElement renvoie true :

import { isValidElement, createElement } from 'react';

// ✅ Les balises JSX sont des éléments React
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true

// ✅ Les valeurs renvoyées par createElement sont des éléments React
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // true

Tout autre valeur, comme les chaînes de caractères, les nombres, un objet ou tableau quelconque, ne constitue pas un élément React.

Dans leur cas, isValidElement renvoie false :

// ❌ Ce ne sont *pas* des éléments React
console.log(isValidElement(null)); // false
console.log(isValidElement(25)); // false
console.log(isValidElement('Bonjour')); // false
console.log(isValidElement({ age: 42 })); // false
console.log(isValidElement([<div />, <div />])); // false
console.log(isValidElement(MyComponent)); // false

On a très rarement besoin d’isValidElement. Elle est principalement utile lorsque vous appelez une autre API qui n’accepte que des éléments React (à l’instar de cloneElement) et que vous voulez éviter une erreur si votre argument n’est pas un élément React.

À moins que vous n’ayez une raison très précise d’ajouter une vérification isValidElement, vous n’en aurez probablement jamais besoin.

function MyComponent() {
  // ... vous pouvez renvoyer n'importe quel nœud React ...
}

function MyComponent() {
  return 42; // Vous pouvez renvoyer un nombre depuis votre composant
}