0
348
VistasAxios: ¿Cómo renderizar la base del elemento API en un elemento secundario específico?
Hola a todos, soy nuevo en ReactJS y también en Axios. Intento obtener datos de Instagram Api y quiero mostrar una imagen si la imagen tiene una letra específica en el título, por ejemplo, si el título tiene la letra 'Y', debería mostrarse en la página; de lo contrario, no. Con mi código, renderizo todas las publicaciones desde el perfil, pero no puedo ordenar los datos, de la forma en que quiero, por favor ayúdenme [![
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=IGQVJWM3BtaTNEQW9iYXBNZA3JwUU") .then(res => { const posts = res.data.data; this.setState({ posts }); }) } render() { return ( <div> { this.state.posts .map(post => <div className="banner_image"> <img className="post_img" key={post.id} src={post.media_url} alt="image"/> <div className="banner_text"> <div className="banner_content"> { this.state.posts .map(post => <h1 className="main_title" key={post.id}>{post.username}</h1> ) } {this.state.posts .map(post => <h3 className="main_caption" key={post.id}>{post.caption}</h3> ) } </div> </div> </div> ) } </div> ) } } ![][1]](https://i.stack.imgur.com/9RFBj.png)
][2]
1 Respuestas
Responde la pregunta0
Me alejaría de los componentes de reacción basados en clases, ya que se recomienda el estilo funcional. No está haciendo ninguna clasificación dentro de su mapeo de publicaciones, es por eso que no funciona. Donde haces tu this.state.posts.map , lo encadenaría con un filtro para eliminar las publicaciones que no quieres. Así que sería algo como esto:
this.state.posts .filter(post => post.includes('Y')) .map(post => ...)