import React,{useState} from 'react' import axios from 'axios'; import ReactDOM from "react-dom"; export default class Deneme extends React.Component { constructor(props) { super(props); this.state = { loading: true, data: [] }; } getData() { const PostsURL = "https://graph.instagram.com/me/media?fields=id,caption,media_url,permalink,username&access_token=IG...."; axios.get(PostsURL).then((res) => { const data = res.data.data; console.log(data) this.setState({ data: data.filter(data => ['yes'].includes(data.caption)), loading: false, }); }); } async componentDidMount() { this.getData(); } render() { if (this.state.loading) { return <div className='loadingDiv'>Calling the API, one moment please!</div>; } const filterData = this.state.data.filter(d => ['yes'].includes(d.caption) ) return ( <div className="container"> {filterData.map((d) => ( <div className="playerDiv" key={d.id}> {d.username} - {d.caption} </div> ))} </div> ); } }