CODEWITHSUNDEEP
javascriptreactjs
user12954623
user12954623

Reputation:

Array is not visible

I made a post earlier today asking how I could display an array on a page, and got some good pointers that helped in debugging, and brought me a step closer. However I need more pointers. Right now I am not even getting any errors, but still wont show the content of the array even though I can view it in the console. Here is my code:

import React, { Component } from 'react'
import { Container, Row, Col } from 'bootstrap-4-react';
import News from '../Articles/News';
import Post from '../Posts/Post/Post';
import axios from 'axios';
const REACT_APP_NEWS_ARTICLE_API = process.env.REACT_APP_NEWS_ARTICLE_API


export default class Body extends Component {
  constructor(props){
    super(props)

    this.state = {
      posts: [{}],
      newsPost: []

    }
  }
   
  componentDidMount = (props) => {
    axios.all([axios.get(`${process.env.REACT_APP_SERVER_URL}/posts`), 
    axios.get(`https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${REACT_APP_NEWS_ARTICLE_API}`)])
      .then(axios.spread((...responses) => {
        const responseOne = responses[0]
        const responseTwo = responses[1]

        this.setState({
          posts: responseOne.data,
          newsPost: responseTwo.data.articles
        })
      }
      
      ))
  };

  render() {
    // console.log(this.state.posts)
    const newsArticles = this.state.newsPost;
    console.log(newsArticles) //an array

    return (
      <Container id="bodycontainer" className="container">
        <Row className="tech">
         heool
          {newsArticles.map((item, idx) => {
          <ul className="technewslist">
            <li key={idx} className="technewsitem">
            {item.urlToImage}
               {console.log("Title: ",item.title)} //can view these logs in the console.
               {console.log("Description: ",item.description)}
               {console.log(item.urlToImage)}  
            </li>
          </ul>
          })}
        </Row>
        <Row  className="rowstyles">
          <Col className="newscolumn" col="12 sm-6 md-8">
              <Post currentPost={this.state.posts} />
          </Col>
          <Col className="contentcolumn" col="6 md-3">
              <div className="centersources">Sources</div>
          </Col>
        </Row>
      </Container>
    )
  }
}

Any pointer would be greatly appreciated

Upvotes: 1

Views: 72

Answers (1)

Sinan Yaman
Sinan Yaman

Reputation: 5946

The problem here is not about syntax or state, but rather not returning anything from the map function. Try:

{newsArticles.map((item, idx) => (
     <ul className="technewslist">
       <li key={idx} className="technewsitem">
         {item.urlToImage}
        </li>
      </ul>
  ))}

Here, the parantheses does the same thing as:

{newsArticles.map((item, idx) => {
     return (<ul className="technewslist">
       <li key={idx} className="technewsitem">
         {item.urlToImage}
        </li>
      </ul>)
  })}

Upvotes: 4

Related Questions