Pada tutorial kali ini Konsep Koding akan berbagi tutorial mengenai bagaimana caranya mengambil Data dengan Axios yang berupa Array Object, kegunaan bentuk tipe data Array ini adalah untuk menampilkan banyak data yang dikirim dari server contohnya : List Postingan, Kumpulan Artikel, Daftar Suka, Komentar dan lain sebagainya.
Nah sebelumnya kita telah mengambil data berupa singgle object di 3 tutorial sebelumnya, nah pada tutorial ini kita akan menampilkan data Array dengan Metode Looping dan disajikan dalam bentuk List/Table kepada para pengguna.
Memulai Koding
Untuk struktur object datanya seperti ini :
Dan anda bisa melihatnya disini untu API GET Array yang akan kita gunakan pada tutorial ini : untuk Array notasinya seperti gambar di atas di awali dengan []
Pertama silahkan buat project ReactJS terlebih dahulu, jika anda belum memiliki project Reactjs jika sudah silahkan install Axios, setelah itu ubah kode pada file App.js dan ubah kode anda menjadi seperti berikut ini:
Setelah itu run project React anda dan jika berhasil maka tampilannya seperti gambar di bawah ini
Kesimpulan
Array object digunakan untuk menampilkan data yang banyak dan biasanya data bisa di klik layaknya postingan. Nah kamu harus benar-benar memahami konsep Array dan Obeject jika kamu ingin menjadi seorang React Developer. Semoga tutorial ini dapat bermanfaat dan membantu kamu yang sedang mempelajari ReactJS dan bagaimana cara mengambil data API dari server.
0 Comments