Mengakses Go API dari React Frontend – 1

Jika Anda sudah mencoba menghubungkan API pada Frontend dan mendapatkan error tentang CORS, silakan buka modul sebelumnya.

Pada modul ini, kita akan memanggil API untuk menampilkan list anime yang di serve oleh Go Server dan tampilkan data pada React frontend.

Buka file src/components/Animes.js dan modifikasi seperti code dibawah.

Perubahan yang dilakukan adalah dengan menambahkan field isLoaded dengan tipe data boolean. Berfungsi untuk memastikan data berhasil di load dari API.

Pada fungsi componentDidMount(), lakukan fetch data dari API yang telah dibuat pada modul sebelumnya.

Pada fungsi render, periksa, apakah data berhasil diload. JIka berhasil, baru tampilkan data json yang diambil dari API.

import React, { Component, Fragment } from "react";
import { Link } from "react-router-dom";

export default class Animes extends Component{
    state = {
        animes : [],
        isLoaded : false,
    }

    componentDidMount(){
        fetch("http://localhost:4000/v1/animes")
        .then((response) => response.json())
        .then((json) =>{
            this.setState({
                animes: json.animes,
                isLoaded: true,
            })
            console.log(json)
        })
    }

    render(){
        const {animes, isLoaded} = this.state;

        if(!isLoaded){
            return <p>Data is loading...</p>
        }else{
            return(
                <Fragment>
                    <h2>Anime List</h2>
                    <ul>
                        {animes.map((e) =>(
                            <li key={e.id}>
                                <Link to={`/animes/${e.id}`}>{e.title}</Link>
                            </li>
                        ))}
                    </ul>
                </Fragment>
                
            );
        }
    }
}

Jika Anda click link Anime pada browser, maka data yang ditampilkan sudah berasal dari API v1/animes.