CODEWITHSUNDEEP
reactjsreact-hooksgiphygiphy-api
Jay White
Jay White

Reputation: 315

How can I search Giphy's GIF live with React.js?

Based on the official Giphy demo(CodeSandBox), I would like to create a live search function for Giphy GIFs.

And below is a demo of it.
search demo（CodeSandBox）
It holds the keyword as state and passes the keyword state to the search method of giphyFetch.
But the search results are not displayed.

Is there a problem with the code in the demo, or a solution to this problem?
Thank you.

source code

const giphyFetch = new GiphyFetch("sXpGFDGZs0Dv1mmNFvYaGUvYwKX0PWIh");

function App() {
  const [keyword, setKeyword] = useState("");

  const fetchGifs = (offset: number) =>
    giphyFetch.search(keyword, { offset, limit: 10 });

  return (
    <>
      <p>
        <img src="./logo.gif" width="200" alt="Powered by GIPHY" />
      </p>
      <p>
        input keyword
        <input type="text" onChange={e => setKeyword(e.target.value)} />
      </p>
      <h4>search result</h4>
      <Carousel fetchGifs={fetchGifs} gifHeight={200} gutter={6} />
    </>
  );
}

Upvotes: 1

Views: 841

Answers (1)

gdh
gdh

Reputation: 13692

The Carousal does the fetchGifs once upon mount. So you need to force re-mount upon your input onChange. You can do this by adding dynamic key

Like this

...
     <>
      <p>
        <img src="./logo.gif" width="200" alt="Powered by GIPHY" />
      </p>
      <p>
        input keyword
        <input
          value={keyword}
          type="text"
          onChange={e => setKeyword(e.target.value)}
        />
      </p>
      <h4>search result</h4>
      <Carousel
        key={keyword}
        fetchGifs={() => fetchGifs(5)}
        gifHeight={200}
        gutter={6}
      />
    </>
...

Working demo is here

Upvotes: 5

Related Questions