Kenapa muncul error “Cannot read properties of undefined” saat akses props?

[anggi]

Halo teman-teman, saya sedang belajar React dan mencoba membuat komponen sederhana untuk menampilkan data dari props. Tapi saat saya jalankan, muncul error seperti ini:

TypeError: Cannot read properties of undefined (reading 'nama')

Berikut potongan kode saya:

function Card(props) {
  return (
    <div>
      <h2>{props.data.nama}</h2>
    </div>
  );
}

// pemanggilan
<Card />;

Pertanyaannya:

Kenapa bisa muncul error seperti itu?

Bagaimana cara agar props bisa aman dibaca tanpa error, terutama saat data belum tersedia?

Terima kasih banyak sebelumnya atas bantuannya 🙏

• This topic was modified 2 months, 3 weeks ago by anggi. Reason: React Js

[Sidik Talent Pro]

Halo! Masalah yang kamu alami sangat umum dialami saat pertama kali belajar React.

Error:
TypeError: Cannot read properties of undefined (reading 'nama')

terjadi karena props.data pada komponen Card bernilai undefined. Jadi saat React mencoba membaca props.data.nama, program tidak bisa menemukan objek data, makanya muncul error.

Cara Mengatasinya:
Pastikan data selalu ada sebelum kamu akses properti nama.
Kamu bisa tambahkan conditional rendering seperti ini:

function Card(props) {
  return (
    <div>
      <h2>{props.data ? props.data.nama : 'Data tidak tersedia'}</h2>
    </div>
  );
}

Atau pakai optional chaining (fitur modern JavaScript):

function Card(props) {
  return (
    <div>
      <h2>{props.data?.nama || 'Data tidak tersedia'}</h2>
    </div>
  );
}

Catatan:
Di bagian pemanggilan, kamu juga harus pastikan data dikirim, contohnya:
<Card data={{ nama: "Anggi" }} />

Kalau tidak, props.data akan undefined dan error seperti tadi pasti muncul.

Semoga membantu ya!
Kalau masih bingung, bisa share kode lengkapnya, nanti saya bantu cek.

[Author]

Posts