Dibalik 'Error : Cannot read property 'map' of undefined'

March 09, 2022

Ketika sedang mendevelop aplikasi web berbasis React JS, seringkali kita mendapatkan pesan error seperti berikut :

Error : Cannot read property 'map' of undefined

Apa sebenarnya yang terjadi, apa penyebabnya, dan bagaimana solusinya? check it out

Apa penyebabnya?

Pada JavaScript, map adalah properti yang HANYA dimiliki oleh variabel dengan tipe data array. Sehingga jika terdapat variabel selain array, lalu dikenai map maka akan muncul pesan error. Contoh :

let hihi = "some string"

hihi.map( ... ) // ERROR

let hihi = ["a","b"]

hihi.map( ... ) // TIDAK ERROR

walaupun array kosong, tidak akan menghasilkan error

let hihi = []

hihi.map( ... ) // TIDAK ERROR

Nah, sekarang jika variabel dengan tipe data undefined dikenai map maka akan muncul pesan error seperti pada judul artikel ini . Seperti pada contoh berikut ini:

let hihi = undefined

hihi.map( ... ) // ERROR
// Cannot read property 'map' of undefined

Itulah makna dari kata-kata :

Error : Cannot read property 'map' of undefined

Saya sudah meng-assign array ke variabel tersebut, tapi kenapa tetap muncul pesan error tersebut?

Kasus-kasus seperti ini yang sering terjadi ketika sedang mendevelop aplikasi web berbasis React JS. Pertanyaanya adalah, mana yang lebih dulu berjalan? Apakah assign-nya dulu atau map nya dulu? Jangan-jangan ketika map nya dijalankan, variablenya belum di-assign dengan sebuah array?

Mari kita tinjau contoh komponen berikut:

  const [buah, setBuah]=useState(undefined)

  useEffect(() => {
        fetchData...
        setBuah(res.data)   // res.data berisi array
  }, [])

  return (
    <div>
      { buah.map(item => <li> item </li>) }
    </div>
  )

Pada contoh di atas, kita sudah meng-assign variabel buah dengan sebuah array, namun akan tetap muncul pesan error

Error : Cannot read property 'map' of undefined

Kenapa bisa begitu?

Ingat bahwa pada React JS, useEffect baru dieksekusi SETELAH render.

Jadi ketika komoponen di atas dipanggil, pertama-tama React akan merender komponen tersebut (termasuk pada bagian buah.map(...) ). Setelah render yang pertama, React baru menjalankan useEffect.

Sehingga ketika map nya dijalankan, variablenya BELUM di-assign dengan sebuah array. Itulah mengapa muncul pesan error tersebut

Bagaimana solusinya?

Solusi 1

Gunakan array kosong sebagai initial value .

const [buah, setBuah] = useState([])

Karena sebuah array walaupun kosong, tetap memiliki properti map. Sehingga tidak akan memunculkan pesan error. Array kosong yang dikenai map juga tidak akan me-return apapun

Solusi 2

Gunakan operator &&

buah && buah.map(item => <li> item </li>)

dengan begitu, JS akan melihat terlebih dahulu nilai dari buah. Jika nilai dari buah masih undefined, JS tidak akan meneruskan untuk menjalakan buah.map( ... ). Sehingga tidak akan terjadi error

Jika nilai dari buah sudah ada (dalam bentuk array), maka JS akan meneruskan untuk menjalankan buah.map( ... )

Hal ini dikarenakan operator && akan mereturn first falsy value. Lebih jauh bisa dipahami disini

Solusi 3

Gunakan optional chaining. Sebenarnya ini sama dengan solusi 2, namun penulisannya bisa lebih singkat.

buah?.map(item => <li> item </li>)

Lebih jauh tentang optional chaining bisa dilihat disini.

Sekian artikel kali ini, semoga bermanfaat, terimakasih. Support dan diskusi di tweet ini 👇👇👇

Halloo, my first blog post herehttps://t.co/6VGwaiQPA1
— Gal (@gpwisnujati) March 9, 2022