Common Errors & Cara Santai Mengatasinya - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

Pendahuluan

ReactJS adalah salah satu library JavaScript yang paling populer untuk membangun antarmuka pengguna. Namun, dalam pengembangannya, sering kali kita menghadapi berbagai error yang bisa membuat frustrasi. Artikel ini akan membahas beberapa error umum di ReactJS serta cara mengatasinya dengan santai dan efektif.

1. Error: ReactDOM.render is not a function

Penyebab:

• Menggunakan React 18 tanpa menggunakan metode render yang benar.
• Salah dalam mengimpor ReactDOM.

Solusi:

Jika Anda menggunakan React 18, gunakan createRoot untuk merender aplikasi Anda:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Jika masih menggunakan React versi sebelumnya, gunakan:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

2. Error: Cannot read properties of undefined (reading 'map')

Penyebab:

• Mencoba melakukan .map() pada nilai undefined atau null.
• Data belum selesai di-fetch sebelum digunakan.

Solusi:

Pastikan data memiliki nilai default atau lakukan pengecekan sebelum memanggil .map():

const data = items || [];
return data.map(item => <div key={item.id}>{item.name}</div>);

Atau gunakan operator opsional chaining:

return items?.map(item => <div key={item.id}>{item.name}</div>) || <p>Data tidak tersedia</p>;

3. Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Penyebab:

• State diubah dalam render tanpa mekanisme kontrol.
• Pemanggilan fungsi setState secara tidak disengaja dalam body komponen.

Solusi:

Gunakan useEffect untuk memastikan setState tidak dipanggil setiap kali render:

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (count < 5) {
      setCount(count + 1);
    }
  }, [count]);

  return <p>Count: {count}</p>;
}

4. Error: Warning: Each child in a list should have a unique "key" prop.

Penyebab:

• Tidak memberikan properti key unik saat merender daftar elemen.

Solusi:

Pastikan setiap elemen memiliki key unik, misalnya dengan menggunakan id:

return items.map(item => <div key={item.id}>{item.name}</div>);

Jika tidak ada id, bisa menggunakan index, tetapi ini tidak disarankan jika data bisa berubah:

return items.map((item, index) => <div key={index}>{item.name}</div>);

5. Error: Expected an assignment or function call and instead saw an expression

Penyebab:

• Menggunakan arrow function tanpa tanda kurung {} tetapi tidak mengembalikan nilai.

Solusi:

Jika menggunakan arrow function dan ada blok kode, pastikan ada return:

const getMessage = () => {
  return "Hello World!";
};

Atau langsung return dalam satu baris:

const getMessage = () => "Hello World!";

Kesimpulan

Menghadapi error dalam ReactJS memang hal yang biasa, tetapi dengan memahami penyebabnya, kita bisa mengatasinya dengan lebih mudah. Pastikan untuk membaca pesan error dengan teliti, melakukan debugging dengan console.log(), dan selalu merujuk ke dokumentasi React jika mengalami kesulitan. Dengan pendekatan yang santai dan sistematis, error bukan lagi hambatan, tetapi bagian dari proses belajar yang menyenangkan.