isValidElement

const isElement = isValidElement(value)

• Referensi
  • isValidElement(value)
• Penggunaan
  • Memeriksa apakah ada elemen React

Referensi

isValidElement(value)

Panggil isValidElement(value) untuk memeriksa apakah value adalah elemen React.

import { isValidElement, createElement } from 'react';

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

// ❌ Bukan elemen React
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false

Lihat lebih banyak contoh di bawah ini.

Parameter

• value: Sebuah nilai yang ingin diperiksa. Itu dapat berupa nilai apa pun dari jenis apa pun.

Kembalian

isValidElement mengembalikan true jika value adalah elemen React. Jika bukan, ia mengembalikan false.

Catatan penting

• Hanya tag JSX dan objek yang dikembalikan oleh createElement yang dianggap sebagai elemen React. Misalnya, meskipun angka seperti 42 adalah node React yang valid (dan dapat dikembalikan dari komponen), itu bukan elemen React yang valid. Array dan portal yang dibuat dengan createPortal juga tidak dianggap sebagai elemen React.

Penggunaan

Memeriksa apakah ada elemen React

Panggil isValidElement untuk memeriksa apakah beberapa nilai merupakan elemen React.

Elemen React adalah:

• Nilai yang dihasilkan dengan menulis tag JSX
• Nilai yang dihasilkan oleh pemanggilan createElement

Untuk elemen React, isValidElement mengembalikan true:

import { isValidElement, createElement } from 'react';

// ✅ Tag JSX adalah elemen React
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true

// ✅ Nilai yang dikembalikan oleh createElement adalah elemen React
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // true

Nilai lainnya, seperti string, angka, atau objek sembarang dan array, bukan elemen React.

Untuk nilai-nilai tersebut, isValidElement mengembalikan false:

// ❌ Berikut ini *bukan* elemen 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

isValidElement sangat jarang diperlukan. Ini sangat berguna jika Anda memanggil API lain yang hanya menerima elemen (seperti halnya cloneElement) dan Anda ingin menghindari kesalahan saat argumen Anda bukan elemen React.

Kecuali Anda memiliki alasan yang sangat spesifik untuk menambahkan pemeriksaan isValidElement, Anda mungkin tidak membutuhkannya.

function MyComponent() {
  // ... Anda dapat mengembalikan node React apa pun ...
}

function MyComponent() {
  return 42; // Tidak apa-apa untuk mengembalikan angka dari komponen
}