this is how am getting the id of a gif by clicking on them, but am getting this error Uncaught TypeError: Cannot read properties of undefined (reading 'fixed_height'), I want to display fixed_height in UI.

<>
  {Object.keys(gifs).length === 0 ? (
    <div>loading...</div>
  ) : (
    <div className="gif-section">
      {gifs.data.map((items) => {
        return (
          <a href="#" className="image-gifs" key={items.id}>
            <img
              className="live-gifs"
              onClick={() => getGifId(items.id)}
              src={items.images.fixed_height.url}
              alt="..."
            />
          </a>
        );
      })}
    </div>
  )}
</>

here am fetching the gif by id and displaying it.

import axios from "axios";
import { useState } from "react";
import { useEffect } from "react";

const GifInText = ({ gifId }) => {
  const [post, setPost] = useState({});
  console.log("post:", post);

  const fetchData = async () => {
    axios
      .get(`https://api.giphy.com/v1/gifs/${gifId}`, {
        params: {
          api_key: "Xoa3mXrWxKXw6lJscrKUTsbZsXLbGuGY",
          gif_id: gifId
        }
      })
      .catch((error) => {
        console.log("error at fetching gifID2", error);
      })
      .then((response) => {
        setPost(response.data);
      });
  };
  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {Object.values(post).length &&
        Object.values(post).map((items) => {
          return (
            <>
              <h1>{items.id}</h1>
              <img
                className="live-gifs"
                src={items.images.fixed_height.url}
                alt="..."
              />
            </>
          );
        })}
    </div>
  );
};
export default GifInText;

enter image description here

CodePudding user response：

As per the image you shared. If post is an object with a single gif data, you can simple use post.data.url instead of items.images.fixed_height.url and looping through Object.values(post).

{post.data.url && (
        <>
          <h1>{post.id}</h1>
          <img
            className="live-gifs"
            src={post.data.url}
            alt="..."
          />
        </>
      )}