Estoy tratando de llamar a los datos de api solo una vez. Así llamo a api en el archivo home.js con componentedidmount en el componente de clase y quiero representar estos datos en muchos componentes secundarios con componentes funcionales. Cuando llamo a api en cada componente secundario, es funciona, pero cuando trato de llamar con accesorios que solo vienen con una matriz vacía de console.log, por favor, ayuda.
import React 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=IGQ") .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.posts; console.log(props); return ( <> {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 Menu