<> {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> } </>
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;
items.images
items
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)