README.md

React : récupération données API

• On utilise ici la méthode fetch native de JS
• On Utilise le hook useEffet pour gérére le chargement/rechargement des données en fonction de la requête.

Usage basique

import React from "react";
import FetchData from "./FetchData";

export default function App() {
  return (
    <div className="App">
      <FetchData />
    </div>
  );
}

Lectures

• https://www.smashingmagazine.com/2020/07/custom-react-hook-fetch-cache-data
• https://fr.reactjs.org/docs/forms.html

fetch_data.jsx

import React, { useState, useEffect } from "react";

const FetchData = () => {
  const [status, setStatus] = useState("idle");
  const [query, setQuery] = useState("");
  const [data, setData] = useState([]);

  useEffect(() => {
    if (!query) return;
    (async () => {
      setStatus("fetching");
      const response = await fetch(
        `https://hn.algolia.com/api/v1/search?query=${query}`
      );
      const data = await response.json();
      setData(data.hits);
      setStatus("fetched");
    })();
  }, [query]);

  return (
    <>
      <h1>fetch Data</h1>
      <input
        type="text"
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      <p>Status : {status}</p>
      <pre>{JSON.stringify(data, undefined, 2)}</pre>
    </>
  );
};

export default FetchData;