Fixed

[huedaya]

kenapa hasilnya kosong, karena ini async, jadi harus nunggu hitApi() selesai. ditambah tadi belum dipanggil fungsinya.

https://github.com/taqiudind/test/blob/7c1728b8189060fedfe858ee59d24ca93a8bfdc2/src/App.js#L15-L18

seharusnya

  const showApi = () => {
    // kenapa hasilnya kosong, karena ini async, jadi harus nunggu `hitApi()` selesai. 
    // ditambah tadi belum dipanggil fungsinya.
    hitApi().then(() => {
      console.log(listApi);
    })
  };

[huedaya]

Mungkin ini ga best practice, tapi solusiku ngene

import "./App.css";
import { useState } from "react";

const App = () => {
  const endpoint = process.env.REACT_APP_ENDPOINT;

  const [listApi, setListApi] = useState([]);

  async function hitApi() {
    const api = await fetch(endpoint);
    const data = await api.json();
    return data.data
  }

  const showApi = () => {
    hitApi().then((res) => {
      setListApi(res);
      console.log(res)
    })
  };

  return (
    <div className="App">
      <h1>TES API</h1>
      <p></p>
      <button onClick={() => showApi()}>GET API NOW!!</button>
    </div>
  );
};

export default App;

[huedaya]

jadi state listApi di update setelah fetch bener-bener sudah selesai.

[huedaya]

Nek ini iseng coba nampilke data

import "./App.css";
import { useState } from "react";

const App = () => {
  const endpoint = process.env.REACT_APP_ENDPOINT;

  const [listApi, setListApi] = useState([]);

  async function hitApi() {
    const api = await fetch(endpoint);
    const data = await api.json();
    return data.data
  }

  const showApi = () => {
    hitApi().then((res) => {
      setListApi(res);
      console.log(res)
    })
  };

  return (
    <div className="App">
      <h1>TES API</h1>
      <p></p>
      <button onClick={() => showApi()}>GET API NOW!!</button>
      <div>
        {
          listApi != undefined ? (
            listApi.map((item, index) => {
              return (
                <div key={index}>
                  <div>{item.email}</div>
                </div>
              )

            })
          ) : null
        }
      </div>
    </div>
  );
};

export default App;

[taqiudind]

ini cuma di return tok gpp ya berarti sebenernya ? ga perlu dimasukin ke variabel setListApi

async function hitApi() { const api = await fetch(endpoint); const data = await api.json(); return data.data }

[huedaya]

dimasukannya kan tak pindah di line ini

   hitApi().then((res) => {
      setListApi(res);
      console.log(res)
    })

[taqiudind]

jadi state listApi di update setelah fetch bener-bener sudah selesai.

ooohh ngerti ngerti aku maksudmu yg ini kim

[taqiudind]

dimasukannya kan tak pindah di line ini

   hitApi().then((res) => {
      setListApi(res);
      console.log(res)
    })

oohh yayaya makasih kiimm, anda sangat membantu hehe

[taqiudind]

Saatnya saya kembali belajar hehe 👌👌👌👌