React JS can't able to render components from Array-CodePudding

When i try to render my component using map function it show error that this.state.articles is undefined but it work well when i use map function on componentDidMount() OR other functionsenter image description here

import React, { Component } from 'react'
import Items from './Items'

export default class News extends Component {
    constructor() {
        super()
        this.state = {
            articles: this.articles
        }
    }

    async componentDidMount() {
        let GET = 'https://newsapi.org/v2/top-headlines?country=us&apiKey=256fd7f5eed44e16b08f3e23cb2dabdb'
        let Data = await fetch(GET)
        let parse = await Data.json()
        this.setState({ articles: parse.articles })
    }

    render() {
        return (
            <div className='container my-3'>
                <h1>R News | Top Headlines</h1>
                <div className='row'>
                    {
                        this.state.articles.map((ele)=>{
                            return <div></div>
                        })
                    }
                </div>
            </div>
        )
    }
}

k.imgur.com/ALxmx.png

CodePudding user response：

I see that you're using this.articles in the constructor but I don't see it declared anywhere in your class. I think you meant to initialize your state with an empty array and you retrieve the articles from the backend:

constructor() {
        super()
        this.state = {
            articles: []
        }
    }

CodePudding user response：

The reason is because it takes time for the information to get back from newsapi.org so you can either use a async function or add a '?' which will be a check to see whether the article that came back from newsapi is back or not.

Try this render

return (
            <div className='container my-3'>
                <h1>R News | Top Headlines</h1>
                <div className='row'>
                    {
                        this.state.articles?.map((ele, index)=>{
                            return <div key={index}></div>
                        })
                    }
                </div>
            </div>
        )

CodePudding user response：

This is because articles are undefined when the data is not yet loaded try this code,

import React, { Component } from 'react'
import Items from './Items'

export default class News extends Component {
    constructor() {
        super()
        this.state = {
            articles: this.articles
        }
    }

    async componentDidMount() {
        let GET = 'https://newsapi.org/v2/top-headlines?country=us&apiKey=256fd7f5eed44e16b08f3e23cb2dabdb'
        let Data = await fetch(GET)
        let parse = await Data.json()
        this.setState({ articles: parse.articles })
    }

    render() {
        return (
            <div className='container my-3'>
                <h1>R News | Top Headlines</h1>
                <div className='row'>
                    {
                        this.state.articles && this.state.articles.map((ele)=>{
                            return <div></div>
                        })
                    }
                </div>
            </div>
        )
    }
}