Click here to Skip to main content
15,881,173 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
this is how am getting the id of an gif by clicking on them, but am getting this Uncaught TypeError: Cannot read properties of undefined (reading 'fixed_height'), i want to display fixed_height in UI.


JavaScript
<>
    {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>
     }
</>


What I have tried:

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;
Posted
Comments
Richard MacCutchan 9-Mar-22 3:23am    
The message is telling you that the reference items.images has not been initialised. You need to do some debugging to find out what is returned in items.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900