Using Fetch API in React to populate NewsItems | Complete React Course in Hindi #27

React class-based components: In this react course, we will see how to learn react using projects.
This is going to be a project-based course full of real-world react projects.

Best Hindi Videos For Learning Programming:

►C Language Complete Course In Hindi -

►JavaScript Complete Course In Hindi -

►Django Complete Course In Hindi -

Follow Me On Social Media
Comment "#HarryBhai" if you read this 😉😉

[CodeWithHarry]

If you are on Instagram, you can follow me there for more updates on courses & other stuff: Instagram.com/codewithharry

[shashwatagrawal]

Maza aagya bhai... Can't tell how blessed I feel to have discovered your course and also your channel. :)

[sgyqezu]

If you want to make all the cards to equal height then follow this:

In the div with className="card", add a class called "h-100".
Now every card should be of same height but the buttons are not aligned properly due to the difference in content of the different cards. To fix this, in the div with className="card-body", add classes "d-flex flex-column". Then finally, in the read more button add a class "mt-auto".

This should make every card equal height and make them look better. If any problems, feel free to ask :)

[MensAttitude]

If render is called before the componentdidmount, then how articles is being displayed on the page. Because page will be rendered first, and after rendering the page component did mount will be called where we are fetching the data from API?

[framed]

If someone is getting error "Cannot read properties of undefined (reading 'map')" then use this this.state.articles && ....

[maneetkaur]

When I was following the code by Harry Bhai there got an error when fetching the data from the API. this is what I did to resolve the error (I guess this would work for you ) :
async componentDidMount(){
try{
const res = await fetch(url);
const data = await res.json();
this.setState({
articles: data.articles
});
}
catch(e) {
console.log("something is not working");
}
}
PS. You can use axios too

[shi-nee]

For the algorithem. Altho i bought a course on udemy before this course started but i know harry bhai's the best. So im liking and commenting on every video for the algo.

[AmitKumar-xxzj]

Thank you Harry bhai for such an awesome course

[anantdhiman]

i recently start following this course and i am loving it, thank you so much

while learning "fetch" i was getting this error "TypeError: Cannot read properties of undefined (reading 'map')"

From reactjs Docs - this is what i found and works for me, may be it helps other too

fetch(url).then((res) => res.json())
.then((json) => {
this.setState({
articles: json.articles,
loading: false
});
})

[faizshaikh]

Hello, Harry Bhai! You can use below code for adding three dots to title and description of
news:
style={{maxWidth: '100%',
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
overflow: 'hidden',
textOverflow: 'ellipsis'}}

Thank you! Love from solapur

[CodeWhy]

@codewithharry you are my favourite youtuber. Love you bro☺️☺️☺️☺️

[loveleensingh]

Your explanation is awsome you are my inspiration

[sarasazad]

Anand aa rha hai Hary bhai! Excellent you are

[HariomSingh-eifb]

This video series is very very helpful and interesting
Thanks alot Harry bhaiii♥️

[nothingmuch]

Class 9 me hun phir bhi Harry bhai ka ds algo smjh gya itna accha explained hain

[adityanawale]

Is there any alternative of apis that can be used for deployment part

[ajayarya]

Hello, buddy, if you're also get stuck with same problem I had been, just paste it
async componentDidMount() {
fetch("url").then((response) => response.json())
.then((data) => {
this.setState({
articles: data.articles
});
});
},
If anyone can explain me why the old one did not work please help me out.

[lavanyashivu]

Hi pls do make Angular series with crud operations and jwt authentication and pls build a complete MEAN and MERN app

[monoj]

Is there a way to filter news without an imageurl. Like to ignore, if the article doesnt have an image url. And show only does having a image url. Please help.

[ashishvispute]

for those whose componentDidMount is not working i found this syntax and it worked for me
here is my News.Js file

import React, { Component } from 'react'
import NeswItem from './NewsItem'

export class News extends Component {
constructor(){
super();
this.state={
data : null,
loading : false
}
}


componentDidMount(){
let url = //your url
fetch(url).then((res)=>{
res.json().then((result)=>{
console.log(result.articles)

})
})
}

render() {
return (
<>

<div className="container my-3">

<h2>Top Headlines</h2>
<div className='row'>
{this.state.data ?

<div className="col-md-4" key={element.url} >
<NeswItem title={element.title?.slice(0, 45)} description={element.description?.slice(0, 88)} imgurl={element.urlToImage} newsUrl={element.url}/>
</div>
)
: null
}

</div>

</div>
</>
)
}
}

export default News