-1
Hi I am new in ReactJS I want to get a Image with spesific Text in caption from Instagram graph api.For example if caption from image has "yes" word in Instagram then must show in homepage.I try to define Mypost with const myPost = contain yes word but i don't get any return.thank you for your help.
import React,{useState} from 'react'
import axios from 'axios';
import ReactDOM from "react-dom";
function Deneme() {
// component variables go here
const [Posts, setPosts] = useState(null);
const fetchData = async () => {
const response = await axios.get(`https://graph.instagram.com/me/media?fields=id,caption,media_url,permalink,username&access_token=IGQV....`)
setPosts(response.data.data)
};
return (
<div className="Deneme">
<h1>Game of Thrones Posts</h1>
<h2>Fetch a list from an API and display it</h2>
{/* Fetch data from API */}
<div>
<button className="fetch-button" onClick={fetchData}>
Fetch Data
</button>
<br />
</div>
{/* Display data from API */}
<div className="Posts">
{Posts &&
Posts.map((posts, index) => {
const myPost = posts.caption.contains("yes");
const cleanedDate = new Date(posts.released).toDateString();
console.log(cleanedDate)
return (
<div className="posts" key={index}>
<h3>posts {index + 1}</h3>
<h2>{myPost.username}</h2>
<div className="details">
<p>{myPost.caption} </p>
<img className="post_img" src={myPost.media_url} alt="image"/>
</div>
</div>
);
})}
</div>
</div>
);
}
export default Deneme**
enter code here
**
You are not calling the fetchData function anywhere. Call it when the component first renders with the useEffect hook:
useEffect(() => {
fetchData();
}, []);
More on useEffect: https://reactjs.org/docs/hooks-effect.html