In my news search application, I am receive data from API in app.js page, and pass data to component as props. in app.js file data will be show in console log but in news component data not found. here is error.

I was try to more and more, I was create a array in app.js and pass , but there are same result .

Uncaught TypeError: news.map is not a function
    at NewsList (NewsList.jsx:58:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at beginWork$1 (react-dom.development.js:27381:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
    at workLoopSync (react-dom.development.js:26422:1)
    at renderRootSync (react-dom.development.js:26390:1)
    at recoverFromConcurrentError (react-dom.development.js:25806:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:25706:1)

Here is app.js code

import React from 'react';
import Header from './component/Header';
import { newsCategory } from './news';
import NewsList from './component/NewsList';
import Pagination from './component/Pagination';
import Loading from './component/Loading';
import axios from 'axios';

class App extends React.Component {

  state = {
    news: []

  }

  componentDidMount() {
    const url = `${process.env.REACT_APP_NEWS_API_URL}?apikey=${process.env.REACT_APP_NEWS_API_KEY}&category=technology&pageSize=5`;
    axios.get(url)
    .then(response => {  
      this.setState({ news: response.data.articles });
     console.log(response.data.articles);
    })
    .catch(error => {
      console.log(error);
    } 
    );
  }
  render ()
  
   {
    return(
      <div className="container">
        <div className="row">
          <div className="col-sm-6 offset-md-3">
           <Header category={newsCategory.technology} ></Header>
           <div className='d-flex'>
             <p className='text-black-50'>
               About {0} result found 
             </p>
             <p className='text-black-50 ml-auto'>
               {1} page of {100}
             </p>
           </div>
           <NewsList news={this.state.news} />
           <Pagination></Pagination>
           <Loading></Loading>
          </div>
        </div>
      </div>
      
    )
  }
 
}

export default App;

here is NewsList.js

import React from 'react'

function getDate(dateTimestr) {
    return new Date(dateTimestr).toDateString;
}
const NewsItem = ({ item }) => (
    <div className='card my-2'>
        {item.urlToImage && (<img
            src={item.urlToImage}
            alt={item.title}
            className='card-img-top'
        />)}
        <div className='card-body'>
            <a
                href={item.url}
                target='_blank'
                rel='noopener noopener'
                style={{ color: '#424242' }}
            >
                <h5 className='card-title'>{item.title}</h5>
            </a>
            <a
                href={item.url}
                target='_blank'
                rel='noopener noopener'
                style={{ color: '#424242' }}
            >
                {item.content}

            </a>
            <div className='mt-2 d-flex aligh-items-center'>
                <small>
                    <strong>
                        Publish at {getDate(item.publishedAt)}
                    </strong>
                </small>
                <div
                    style={{
                        padding: '0.25rem 0.50rem',
                        background: '#ededed',
                        color: '#424242',
                        borderRadius: '0.25rem',
                        display: 'inline-block'
                    }}
                    className='ml-auto'
                >
                    <small>{item.source.name}</small>
                </div>
            </div>
        </div>
    </div>
)
function NewsList(news) {
    return (
      
        <div>
            {console.log(news)}
            {news && news.length === 0 && <h4>THere is no News</h4>}
            {news && news.map(item => <NewsItem key={item.title} item={item} />)}
        
        </div>
    )
}
export default NewsList

CodePudding user response：

you need to change NewsList from this one : NewsList(news) to this one: NewsList({news})

CodePudding user response：

it happen with me also try another api may be you reached request limit i used SauravNewsTech api for unlimited req. my project ==> https://hrbnews.netlify.app/