MENU


usePost

Below, we extract out a jQuery AJAX POST function so that we have a function that can pull data from an arbitrary URL path from a server.
RESETRUNFULL
<!DOCTYPE html><html><head></head><body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const usePost = (path) => {   // AJAX POST
  const [response, setResponse] = React.useState(null);
  const [loading,setLoading] = React.useState(false);
  const [error,setError] = React.useState(null);
  // Runs whenever the dependency path changes
  React.useEffect(() => {
    setLoading(true);
    $.ajax({
      url: 'http://quizjungle-app.com/' + path,
      data: {password:'xxx'},
      method: 'POST',
      timeout: 0,
      cache: false,
      ifModified: false,
      crossDomain: true,
      success: (res, textStatus, jqXHR) => {setResponse(res); setLoading(false); },
      error: (jqXHR, textStatus, err) => {setLoading(false); setError(err); }
    });
  }, [path]);
  return { response,loading,error };
};
const DisplayUsername = () => {
  const {response,loading,error} = usePost('getUsername.php');
  return (<div>{loading ? "Loading ..." : <h1> Username : {response} </h1>}
    {error && <h2> {error} </h2>}
  </div>);
}
const root = ReactDOM.createRoot(document.querySelector("div"));
root.render(<DisplayUsername />);
</script>
<div></div>
</body></html>

In modern React code you'd typically replace the jQuery $.ajax call with the native fetch() API (or a data-fetching library such as TanStack Query), but the custom-hook pattern shown here — wrapping an async call and exposing response/loading/error state — stays the same.