1import { useState, useEffect } from 'react';
 2import axios from 'axios';
 3
 4const API_KEY = process.env.REACT_APP_API_KEY;
 5const url = `https://api.giphy.com/v1/gifs/random?api_key=${API_KEY}`;
 6
 7const useGif = (tag) => {
 8    const [gif, setGif] = useState('');
 9
10    const fetchGif = async (tag) => {
11        const { data } = await axios.get(tag ? `${url}&tag=${tag}` : url);
12
13        const imageSrc = data.data.images.downsized_large.url;
14
15        setGif(imageSrc);
16    }
17
18    useEffect(() => {
19        fetchGif(tag);
20    }, [tag]);
21
22    return { gif, fetchGif }
23}
24
25export default useGif;

 1
 2import React from 'react';
 3
 4import useGif from '../useGif';
 5
 6const Tag = () => {
 7    const {gif, fetchGif} = useGif();
 8
 9    return (
10        <div className="container">
11            <h1>Random Gif</h1>
12            <img width="500" src={gif} alt="Random Gif" />
13            <button onClick={fetchGif}>CLICK FOR NEW</button>
14        </div>
15    );
16}
17
18export default Tag;

 1
 2import React, { useState } from 'react';
 3
 4import useGif from '../useGif';
 5
 6const Tag = () => {
 7    const [tag, setTag] = useState('dogs');
 8    const {gif, fetchGif} = useGif(tag);
 9
10    return (
11        <div className="container">
12            <h1>Random {tag} Gif</h1>
13            <img width="500" src={gif} alt="Random Gif" />
14            <input value={tag} onChange={(e) => setTag(e.target.value)} />
15            <button onClick={() => fetchGif(tag)}>CLICK FOR NEW</button>
16        </div>
17    );
18}
19
20export default Tag;