React Untuk Pemula — CRUD Part 2

Pada tutorial sebelumnya kita sudah berhasil menampilkan list data. Namun data tersebut masih ditulis secara hardcoded pada tag tabel html. Dan pada tutorial kali ini kita akan memodifikasi aplikasi react kita sehingga bisa menampilkan data array ke dalam sebuah tabel html.

Menampilkan Data Array ke dalam sebuah React Component

Kita akan memecah Table Component yang sudah dibuat sebelumnya ke dalam beberapa bagian dan kita akan menggunakan Simple React Component.

1. Komponen Tabel Utama
2. Komponen Tabel Head
3. Komponen Tabel Body

Lakukan perubahan pada file App.js dan Table.js di folder src.

src/App.js

Pada kode di atas kita menambahkan sebuah data array dengan nama variabel characters. Dan kemudian kita melemparkan atau mempassing data array tersebut sebagai sebuah props dengan nama characterData dari component Table. Secara sederhana, Props pada React digunakan untuk menghandel data.

<Table characterData={characters} />

src/Table.js

Bisa kita lihat, ada satu komponen tetap dengan nama Table (dibuat dengan React Component)dan 2 komponen sebagai child component (TableHeader & TableBody) dari Table Component yang dibuat dengan Simple React Component. Yang mana simple component ini adalah sebuah function jadi tidak perlu dideklarasikan sebagai class dan mengextend dari class React.Component.

Pada Komponen Table kita mengambil data characterData dari props kemudian dipassing sebagai sebuah props lagi ke dalam komponen TableBody.

//mengambil data characterData
const { characterData } = this.props
...
//mempassing data sebagai sebuah props ke dalam komponen TableBody
<TableBody characterData={characterData} />

Dan Pada komponen TableBody, di dalam method render, props characterData (data array) diubah menjadi element row (tr) dan ditampilkan ke dalam sebuah tabel.

const rows = props.characterData.map((row, index) => {
  return (
   <tr key={index}>
    <td>{row.name}</td>
    <td>{row.job}</td>
   </tr>
  )
 })
return (
  <tbody>{rows}</tbody>
)

Terakhir jalankan aplikasi react melalui terminal

npm start

Jika tidak ada kesalahan & error, maka tampilannya akan seperti ini: