18.customhook.html

<!DOCTYPE html>
<html>
  <head>
    <title>custom hook</title>
    <meta charset="utf-8" />
    <style>
      body {
        font-family: -apple-system, sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>
    <script src="react/babel.js"></script>
    <script type="text/babel">
      const { Fragment, useState, useEffect } = React;

      const useDataApi = (initialUrl, initialData) => {
        const [data, setData] = useState(initialData);
        const [url, setUrl] = useState(initialUrl);
        const [isLoading, setIsLoading] = useState(false);
        const [isError, setIsError] = useState(false);

        useEffect(() => {
          const fetchData = async () => {
            setIsError(false);
            setIsLoading(true);

            try {
              const result = await (await fetch(url)).json();
              setData(result);
            } catch (error) {
              setIsError(true);
            }

            setIsLoading(false);
          };

          fetchData();
        }, [url]);

        return [{ data, isLoading, isError }, setUrl];
      };

      function App() {
        const [query, setQuery] = useState("react");
        const [{ data, isLoading, isError }, doFetch] = useDataApi(
          "https://hn.algolia.com/api/v1/search?query=react",
          { hits: [] }
        );

        return (
          <Fragment>
            <form
              onSubmit={(event) => {
                doFetch(`http://hn.algolia.com/api/v1/search?query=${query}`);

                event.preventDefault();
              }}
            >
              <input type="text" value={query} onChange={(event) => setQuery(event.target.value)} />
              <button type="submit">Search</button>
            </form>

            {isError && <div>Something went wrong ...</div>}

            {isLoading ? (
              <div>Loading ...</div>
            ) : (
              <ul>
                {data.hits.map((item) => (
                  <li key={item.objectID}>
                    <a href={item.url}>{item.title}</a>
                  </li>
                ))}
              </ul>
            )}
          </Fragment>
        );
      }

      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>