Llamo a api en el archivo Home.js con componentedidmount en componente de clase y quiero representar estos datos en componentes secundarios con componentes funcionales. Cuando llamo a api en cada componente secundario, funciona, pero cuando intento llamar con accesorios que solo están vacíos matriz por console.log por favor ayuda.
import React,{Component} from 'react' import '../styles/home.css' import axios from 'axios'; import Teaser from './Teaser' import Second from './Second' import Opening from './Opening' import Menu from './Menu' export default class Home extends React.Component { state = { posts: [] } componentDidMount() { axios.get("https://graph.instagram.com/me/media?fields=id,caption,media_url,permalink,username&access_token=IG") .then(res => { const posts = res.data.data; this.setState({ posts }); }) } render() { return ( <> <Teaser/> <Second/> <Opening/> <Menu posts = {this.state.posts}/> </> ) } } import React from 'react' import axios from 'axios'; function Menu(props) { const {posts} = props; console.log(props); return ( <> {posts && posts.map( (post) => post.caption.includes('#apegustosa_menu') && post.children.data.map((x) => ( <div className="menu_item" key={x.id}> <img className="menu_img" src={x.media_url} alt="image" /> </div> )), )} </> ) } export default MenuAquí tienes:
return ( <> { posts && posts.map(post => ( post.caption.includes("#apegustosa_menu") && post.children.data.map(x => { return <img src={x.media_url} alt="img"></img> }) )) } </> )