What is the best approach to use different API calls for conditional rendering a React app-CodePudding

I'm trying to set a default url from an api when the user is not searching anything inside the searchbar. What is the best approach? Here's the code for a better explanation:

 const [img, setImg] = useState("");


  const defaultUrl `https://api.unsplash.com/search/photos?page=1&query=chefs&client_id=${clientId}&per_page=20`;`
  const url = `https://api.unsplash.com/search/photos?page=1&query=${img}&client_id=${clientId}&per_page=20`;
  const { response, loading, error } = useFetch(url);

  const handleSearchChange = (e) => {
    setImg(e.target.value);
  };

  return (
    <div className="container-fluid">
      {loading && <p>Loading...</p>}
      {error && <p>Something went wrong...</p>}
      {response && response === null ? (
        <>
          <div className="row">
            <div className="col-12 d-flex justify-content-center align-items-center input">
              <input
                className="col-3 form-control-sm py-1 fs-4 text-capitalize border border-3 border-dark"
                type="text"
                placeholder="Search Anything..."
                value={img}
                onChange={handleSearchChange}
              />
              ;
            </div>
          </div>
          <div className="row">
            <div className="col-12 d-flex justify-content-evenly flex-wrap">
              {response.results.map((val) => {
                return (
                  <img
                    key={val.id}
                    className="col-3 img-fluid img-thumbnail"
                    src={val.urls.small}
                    alt="val.alt_description"
                  />
                );
              })}
            </div>
            ;
          </div>
        </>
      ) : (
        // Other div with default values gotten from default api url
      )}
    </div>
  );

Tried somehow changing the url of the Usefetch call when there was no response. I was thinking about making a seperate component for the images, but not sure how to implement the usefetch then so it is dynamic.

CodePudding user response：

if your useFetch hook reacts to changes, then...

useFetch( img === "" ? defaultUrl : `https://api.unsplash.com/search/photos?page=1&query=${img}&client_id=${clientId}&per_page=20 `

Or for cleaner codes, create a getUrl function

// this outside component so it doesn't recreate on every render
const getUrl = (img) => {
  return `https://api.unsplash.com/search/photos?page=1&query=${img}&client_id=${clientId}&per_page=20`
}
// then use it this way
useFetch(img === "" ? defaultUrl : getUrl(img))

You can even go one step further by putting the conditional check in getUrl() function

const getUrl = (img) => {
  return img === "" ? default Url : `https://api.unsplash.com/search/photos?page=1&query=${img}&client_id=${clientId}&per_page=20`
}
//then...
useFetch(getUrl(img))