Buscador de GIFS

gistfile1.txt

import { useEffect, useState } from "react";
import "./App.css";

const Search = ({ handleSearchTerm }) => {
  const [searchTerm, setSearchTerm] = useState("");
  return (
    <div>
      <input
        onChange={(e) => {
          const value = e.target.value;
          setSearchTerm(value);
        }}
      />
      <button onClick={() => handleSearchTerm(searchTerm)}>Search</button>
    </div>
  );
};

const Gif = ({ title, imgUrl }) => {
  return (
    <div>
      <h1>{title}</h1>
      <img src={imgUrl} alt={title} />
    </div>
  );
};

function App() {
  const [gifs, setGifs] = useState([
    {
      title: "",
      url: "",
      images: {
        original: {
          url: "",
        },
      },
    },
  ]);
  const [searchTerm, setSearchTerm] = useState("kitties");
  useEffect(() => {
    const promise = fetch(
      `https://api.giphy.com/v1/gifs/search?q=${encodeURI(
        searchTerm
      )}&limit=10&api_key=oAilDgJZfgzg38LMTGIGtmpDf8sH7FEX`
    );

    promise
      .then((body) => body.json())
      .then((data) => {
        setGifs(data.data);
      });
  }, [searchTerm]);

  useEffect(() => {
    console.log(gifs);
  }, [gifs]);

  const handleSearch = (term) => {
    setSearchTerm(term);
  };

  const arrX = gifs.map((value) => {
    return (
      <Gif
        title={value.title}
        imgUrl={value.images.original.url}
        key={value.id}
      />
    );
  });

  return (
    <div className="App">
      Mi app funciona <Search handleSearchTerm={handleSearch} /> {arrX}
    </div>
  );
}

export default App;