I want to make a news website using news api in react but I am not able to display articles from json . I think fetch function is correct but it prints the data twice in console. I don't know why, please tell me about it if you know. Also, I am not able to print list of articles in display using map on array , please tell me , I am really confused.
const [News, setNews] = useState([]);
useEffect(() => {
fetch(
`https://newsapi.org/v2/top-headlines?country=in&category=${category}&apiKey=${API_KEY}`
)
.then((response) => response.json())
.then((data) => {
console.log(data.articles);
setNews(data.articles);
});
}, [category]);
In return body I wanted to get list of articles but it just makes my desktop screen blank , not even error shows up.
<ul>
{News.map((data) => {
<li key={data.title}>{data.title}</li>;
})}
</ul>
The console returns
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {source: {…}, author: null, title: 'E-invoicing ‘soon to be mandated’ for units with over ₹10-cr turnover - BusinessLine', description: null, url: 'https://news.google.com/__i/rss/rd/articles/CBMikg…b3JlLW5leHQvYXJ0aWNsZTY1NTk0OTcyLmVjZS9hbXAv?oc=5', …}
1: {source: {…}, author: null, title: 'Cancer Horoscope for July 2022 - Susan Miller Astrology Zone - Astrology Zone', description: 'The latest in astrological trends by Susan Miller,…r advancement, travel, health, fitness, and more.', url: 'https://www.astrologyzone.com/forecasts/cancer-horoscope-for-july-2022/', …}
2: {source: {…}, author: 'Riya Ghosh', title: 'iPhone User? Know all about the WhatsApp Blur Tool - Techstory', description: 'This latest technology introduced by WhatsApp enab…ent of the picture before ', …}
3: {source: {…}, author: null, title: 'Supreme Court Judge Who Heard Nupur Sharma Plea Slams "Personal Attacks" - NDTV', descripti.....}
.....
Please tell me what i did wrong
You have a typo in your code:
console.log(data.articles);
setNews(data.articals);
data.articles and data.articals ?
For the issue related to printing twice in console, it might be related to Strict Mode, If you are using React 18 and have Strict mode on then in development mode it runs useEffect twice, in Production mode it will work normally that is single time. You can read the official documentation and check out the Youtube video which explain clearly why it was done so.
For the Second question why not able to print list of articles, it is related to News.map here you are missing return statement
<ul>
{News.map((data) => {
return <li key={data.title}>{data.title}</li>;
})}
</ul>
Let me know does that helps.
Problem-1 : Console is Printing Twice
That's because the useEffect ran twice if you are using React 18 - Please check the Network Tab on Chrome Dev Tools to verify if the request is sent twice.
You can use if/else statement, if the data is already fetched then don't call API again.
Problem-2 : Not Displaying List
That's becuase you are missing the return statement in the MAP function.
<ul>
{News.map((data) => {
return <li key={data.title}>{data.title}</li>;
})}
</ul>
Hope this helps!