Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara membuat sebuah route di dalam React.js, dan di artikel kali ini kita akan lanjutkan bagaimana cara menampilkan data di dalam React.js dan data tersebut akan di ambil dari Rest API yang telah kita buat di dalam Express.js.
CATATAN : pastikan project Express.js sudah dijalankan terlebih dahulu.
Langkah 1 - Installasi Library Axios
Axios merupakan library yang bersifat open source dan digunakan untuk melakukan HTTP request ke dalam server untuk melakukan manipulasi data. Sekarang kita akan tambahkan Axios di dalam project React.js. Axios ini akan kita manfaatkan untuk mengelola endpoint API dari Express.js yang sudah kita buat. Silahkan jalankan perintah di bawah ini di dalam terminal/CMD dan berada di project React.js.
npm install axios@0.21.1
Langkah 2 - Menampilkan Data di React.js
Pertama, kita akan melakukan perubahan di dalam isi dari halaman / component yang sebelumnya sudah kita buat. Silahkan buka file src/pages/posts/Index.js, kemudian ubah semua kode-nya menjadi seperti berikut ini :
//import hook useState dan useEffect from react
import { useState, useEffect } from 'react';
//import react router dom
import { Link } from "react-router-dom";
//import component Bootstrap React
import { Card, Container, Row, Col, Button, Table } from 'react-bootstrap';
//import axios
import axios from 'axios';
function PostIndex() {
//define state
const [posts, setPosts] = useState([]);
//useEffect hook
useEffect(() => {
//panggil method "fetchData"
fectData();
}, []);
//function "fetchData"
const fectData = async () => {
//fetching
const response = await axios.get('http://localhost:3000/api/posts');
//get response data
const data = await response.data.data;
//assign response data to state "posts"
setPosts(data);
}
return (
<Container className="mt-3">
<Row>
<Col md="{12}">
<Card className="border-0 rounded shadow-sm">
<Card.Body>
<Button as={Link} to="/posts/create" variant="success" className="mb-3">TAMBAH POST</Button>
<Table striped bordered hover className="mb-1">
<thead>
<tr>
<th>NO.</th>
<th>TITLE</th>
<th>CONTENT</th>
<th>AKSI</th>
</tr>
</thead>
<tbody>
{ posts.map((post, index) => (
<tr key={ post.id }>
<td>{ index + 1 }</td>
<td>{ post.title }</td>
<td>{ post.content }</td>
<td className="text-center"></td>
</tr>
)) }
</tbody>
</Table>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}
export default PostIndex;
Dari perubahan kode di atas, pertama kita melakukan import 2 hook dari React.js, yaitu useState dan useEffect.
//import hook useState dan useEffect from react
import { useState, useEffect } from 'react';
Setelah itu, kita import method Link dari React Router Dom. Ini akan kita gunakan untuk melakukan navigasi ke halaman-halaman yang lain.
//import react router dom
import { Link } from "react-router-dom";
Dan kita juga import beberapa component dari React Bootstrap.
//import component Bootstrap React
import { Card, Container, Row, Col, Button, Table } from 'react-bootstrap';
Terakhir, kita import Axios, karena kita akan menggunakannya untuk melakukan HTTP request ke dalam Rest API yang ada di Express.js.
//import axios
import axios from 'axios';
Kemduian, di dalam function component PostIndex, pertama kita mendefinisikan sebuah state baru, yaitu :
//define state
const [posts, setPosts] = useState([]);
Di dalam React.js, untuk mendefinisikan state menggunakan hook useState, kurang lebih seperti di atas. Untuk parameter pertama akan digunakan untuk menyimpan data. Dan parameter kedua biasa disebut dengan handler state, yaitu bertugas untuk melakukan manipulasi data di dalam state, baik melakukan assign ataupun update. Dan untuk state di atas nilai default-nya kita atur menggunakan array kosong.
Setelah itu, kita menggunakan hook useEffect, hook ini akan dijalankan ketika component telah di mount. Dan di dalam hook ini, kita memanggil method yang bernama fetchData. Method ini yang nantinya akan kita gunakan untuk melakukan HTTP request ke Rest API.
//useEffect hook
useEffect(() => {
//panggil method "fetchData"
fectData();
}, []);
Sekarang, untuk method fetchData, kurang lebih seperti berikut ini :
//function "fetchData"
const fectData = async () => {
//fetching
const response = await axios.get('http://localhost:3000/api/posts');
//get response data
const data = await response.data.data;
//assign response data to state "posts"
setPosts(data);
}
Method fetchData di atas kita jadikan asynchronus dengan menambahkan keyword async. Dan di dalamnya kita melakukan fetching menggunakan Axios dengan method GET ke dalam endpoint http://localhost:3000/api/posts.
//fetching
const response = await axios.get('http://localhost:3000/api/posts');
Jika dari proses fetching di atas berhasil, maka kita akan simpan data responsenya di dalam variable data.
//get response data
const data = await response.data.data;
Setelah itu, kita assign data tersebut ke dalam handler state, yaitu setPosts.
//assign response data to state "posts"
setPosts(data);
Dengan begitu, maka data akan masuk ke dalam state posts dan kita bisa menampilkannya. Dan untuk menampilkan data, kita bisa melakukan perulangan menggunakan method dari Javascript yaitu map. Kurang lebih seperti berikut ini :
{ posts.map((post, index) => (
<tr key={ post.id }>
<td>{ index + 1 }</td>
<td>{ post.title }</td>
<td>{ post.content }</td>
<td className="text-center"></td>
</tr>
)) }
Di atas, kita melakukan map di dalam state posts yang mana isinya adalah array data yang di dapatkan dari Rest API.
Langkah 3 - Uji Coba Menampilkan Data
Sekarang, jika kita coba jalankan project React.js, dan menuju ke URL http://localhost:3001/posts, maka kita akan mendapatkan hasil seperti berikut ini :
Jika belum menampilkan data apapun, pastikan bahwa di dalam database dan di table posts sudah ada data-nya.
Sampai disini pembahasan bagaimana cara menampilkan data di dalam React.js, di artikel selanjutnya kita akan belajar bagaimana cara melakukan proses insert data di dalam React.js.
Terima Kasih