Playlist access kar lena: ruclips.net/p/PLu0W_9lII9agx66oZnT6IyhcMIbUMNMdt If you are on Instagram, you can follow me there for more updates on courses & other stuff: instagram.com/codewithharry
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 :)
Hi ..could you plz let me know why the fetch api was used in componentDidMount() and not in the constructor(). I understand it means the fetch API happens after rendering but my question is "why"? Why can't it happen at the very outset ?
@@ummi7292 Because you cannot make a constructor async in JavaScript. if we use fetch() API without async and await then it will asign value to data variable as a pending promise (it will assign varaible first because of Asynchronous nature of JS )
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
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
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 }); })
harry bhai 7:47 hum element.title && element.title.slice(); and same for description also bhi use kr skte hai nah maine wahi kiya tha aur usse thik hogya tha.....
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?
I think that's why he used async await function which stops all other function and fetch data and then render so using async function it will wait for fetching and then render page
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.
Hii, i am still stuck with not getting any news from api show on the browser. I can see thtat the api is working as I can see the result in console tab, but not on the web page. No error is displaying as well
Hii, i am still stuck with not getting any news from api show on the browser. I can see thtat the api is working as I can see the result in console tab, but not on the web page. No error is displaying as well
hey harry one question, first the constructor is called then render is called and only then componentdidmount is called which brings the data. if render is called before componentdidmount, then how is the fetched data rendered and shown to our page
componentdidmount function re-renders the page immediatly after changing the state..thus first constructor then render then componentdidmount then render again..
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.
if anybody having error for undefined:state Simply add this to componentDidMount : .then(response => response.json()) .then(data => this.setState({ articles: data, loading: false }));
harry bhai koi effective way nahi hai kya API se data fetch karne ke liye? ....becauce everytime we click next ...it again request the api........jisse apne request waste ho rahe hai...... there should be a way jisse app ek sath hi sab page load kar lo ..then after usse page mai seprate kar lo........
Constructor Render Component did mount That’s the reason it’s not displaying in browser and if you map in component did mount and you can see the output.
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) this.setState({data:result.articles}) }) }) } render() { return (
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')" I have used below code in constructor and its working fine.... constructor() { super(); console.log("This is constructor") this.state = { articles: [], loading: false } }
update your code instead using this.setState({articles:parsedData.articles}) you can use this.setState(this.articles=parsedData.articles) and also cannot remove the articles array that you already initialize in the first place.
@@FarhanAhmad-ll5fn there may a lot of reasons, it is impossible to track it without seeing the actual code, you may paste the errors here, we can see it. One possible reason may by, you are not using localhost:3000, instead you are using 198.162.xx.xx ip address, using ip address will not work, instead open the localhost link, other possible reason may be the wrong apikey, or a expired api key.
I would comment in every video till you don't reply. I am really thankful to you. I didn't have cs in 12th but learned programming c and CPP from your videos and still learning. Moreover, I got a confidence boost. Once again thank you for your efforts.
#HarryBhai, Harry Bhai, big fan. But I have a question, what is promise? I think I have missed this part. Can you please tell me in which video have you discussed about it?
int [] arr={1,2,3,4,5} another way is by mentioning the size--> int [] arr= new int[4]; arr[0]=1; arr[1]=2; .. and do check the java playlist for detail.
Hello Harry Bhai, I am in diploma, I want to buy a laptop, which processor is better for diploma and Degree of Information technology ? intel i-3 or intel i-5 ? ryzen-3 or ryzen-5 ? Please reply me....
@@sheikhmuzamil7218 async componentDidMount(){ const res = await fetch(url); const data = await res.json(); //Here I used this.setstate we must use this.articles.setstate// this.articles.setState({ articles: data.articles }); }
whoever getting error like this "TypeError: Cannot read properties of undefined (reading 'map')" please try this solution , change fetch(url) to fetch(url).then((res) => res.json()) .then((json) => { this.setState({ articles: json.articles, loading: false }); }); it should work
If someone is getting error "Cannot read properties of undefined (reading 'map')" then use this this.state.articles && this.state.articles.map((element) ....
@@avadhut0007 It checks whether the array is NULL or not, if it is null then (i.e it will check this.state.articles is NULL or not ), if it is null then it will not run the code. We have to do this because if it is null then .map function will throw error.
Friends, if your data is not fetched using API , then you can change your default browser from Chrome to Microsoft edge, this may fetch data, as I was struggling for 3days, and when I change the default browser it suddenly loded all the news
componentDidMount me this.setState karne k baad mere console me to error hi nhi aa raha slice wala, fir bhi mere app me news update nahi ho raha API se
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.
Playlist access kar lena: ruclips.net/p/PLu0W_9lII9agx66oZnT6IyhcMIbUMNMdt
If you are on Instagram, you can follow me there for more updates on courses & other stuff: instagram.com/codewithharry
hi harry
where we can get full code
@@adarshjaiswal2312 plz batao harry bhai
Haris Bhai CompTIA A+ CompTIA security+ CEH pr networking pr videos banaden
Maza aagya bhai... Can't tell how blessed I feel to have discovered your course and also your channel. :)
fetch is not working please help me
www.youtube.com/@advanceduitechniques516
@@FarhanAhmad-ll5fn same
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 :)
Hi ..could you plz let me know why the fetch api was used in componentDidMount() and not in the constructor(). I understand it means the fetch API happens after rendering but my question is "why"? Why can't it happen at the very outset ?
@@ummi7292 Because you cannot make a constructor async in JavaScript.
if we use fetch() API without async and await then it will asign value to data variable as a pending promise (it will assign varaible first because of Asynchronous nature of JS )
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
Thank you brother it helps.
Thanks brother i was struggling with this error for 2-3 hours now it's working.... 👍
thanks, it worked
Thanks bro Its very helpfulful for me.
Working...Thank a lot
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
are bro direct jake text-truncate class use kro na khel khatam
bootstrap class h text-truncate u can see
www.youtube.com/@advanceduitechniques516
@@kamalpurohit7158
but i am not getting 3 dots at end
@@thecosmetrohub2737 use text-truncate inside tags of NewsItem component where you defined title and description and it will work
Anand aa rha hai Hary bhai! Excellent you are
Class 9 me hun phir bhi Harry bhai ka ds algo smjh gya itna accha explained hain
Thank you Harry bhai for such an awesome course
@codewithharry you are my favourite youtuber. Love you bro☺️☺️☺️☺️
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
});
})
bro after one hour finally i got solution
Update ur constructor like this :
constructor() {
super();
this.state = {
articles : [],
loading : false
}
}
Thank you @rushikesh
I did realised, I didn’t use await :)
@@anantdhiman4189 yes
@@rushikeshsaraf6219 thank you so much you make life life ! other wise i am looking length and array
Harry Bhai OP!!!! 🔥😊
Aanand aa raha h Harry bhaii♥
Thanks a lot #HarryBhai
harry bhai 7:47 hum element.title && element.title.slice(); and same for description also bhi use kr skte hai nah maine wahi kiya tha aur usse thik hogya tha.....
Your explanation is awsome you are my inspiration
Wow!!!! 🔥🔥 Harry Bhai 😀
Done with #27 Thank YOU!!
🥳
East or west Harry Bhaiya Best 🔥😍
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?
I think that's why he used async await function which stops all other function and fetch data and then render so using async function it will wait for fetching and then render page
I implemented the same and I’m facing the same issue
Anand Aa Rha Hai
Harry bhai on fire !!
Bhai aaj toh aapne mauj kardi ek ke baad ek videos♥️♥️
fetch is not working please help me
Sir Multi Recharge Software development ke baare me bhi kuchh bataye
Maza aa gya bhaai....
This video series is very very helpful and interesting
Thanks alot Harry bhaiii♥️
I'm totally getting blank page after writing all the codes and in the console its showing the 20 objects I don't know where is the error?
Amazing work #harryBhai
Bahot Sahi 💥
koi dikkat wali bat nahi hai harry vai
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.
you are life saver
Dil se sukriya bhai❤
thank you i was stuck here from 2 days
Hii, i am still stuck with not getting any news from api show on the browser.
I can see thtat the api is working as I can see the result in console tab, but not on the web page.
No error is displaying as well
Hii, i am still stuck with not getting any news from api show on the browser.
I can see thtat the api is working as I can see the result in console tab, but not on the web page.
No error is displaying as well
Harry is on fire 🔥
it is no harm pay no attention to it
Fully Sunday gride 🔥🔥🔥
Please make course on machine learning
can you please make a video on Yelp API...
hey harry one question, first the constructor is called then render is called and only then componentdidmount is called which brings the data. if render is called before componentdidmount, then how is the fetched data rendered and shown to our page
I think because he used asyn await so the execution of another function stopped and first componentdidmount called and then render
componentdidmount function re-renders the page immediatly after changing the state..thus first constructor then render then componentdidmount then render again..
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.
if anybody having error for undefined:state
Simply add this to componentDidMount :
.then(response => response.json())
.then(data => this.setState({ articles: data, loading: false }));
Bro please can you send the full code pls i am facing this error from last two days
@@rahulvishwakarma9640 send me your number
same question...can you paste your code here
Please continue your machine learning course
harry bhai koi effective way nahi hai kya API se data fetch karne ke liye?
....becauce everytime we click next ...it again request the api........jisse apne request waste ho rahe hai...... there should be a way jisse app ek sath hi sab page load kar lo ..then after usse page mai seprate kar lo........
this tutorial is usefull
Constructor
Render
Component did mount
That’s the reason it’s not displaying in browser and if you map in component did mount and you can see the output.
full majaaa aaa rha Harry bhai❤❤❤❤❤✌✌
fetch is not working please help me
Thank you ❤️
Harry bhai sahi mein maza agaya. You are the best teacher and I like your voice very much ❤️
Could you help me why fetch is not working?
Angaar... 🔥🚀
you are a legend bro your explanation is awsome you are my inspiration
fetch is not working please help me
logic ne harry bhai ka dimaag lelia
Hello Harry Bhai!
Why didn't all the articles get displayed in this page only?
Yess mza aaya ❤❤
harry bhauuu u are star
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)
this.setState({data:result.articles})
})
})
}
render() {
return (
Top Headlines
{this.state.data ?
this.state.data.map((element)=>
)
: null
}
)
}
}
export default News
it worked .thanks
thanx brother
ab sirf navbar and heading show ho rhi hey baki kuch na show ho raha
thank you
You are life saver
maza aagaya bhai
Awesome series
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')"
I have used below code in constructor and its working fine....
constructor() {
super();
console.log("This is constructor")
this.state = {
articles: [],
loading: false
}
}
update your code instead using this.setState({articles:parsedData.articles}) you can use this.setState(this.articles=parsedData.articles) and also cannot remove the articles array that you already initialize in the first place.
@@abhishekbiranje4533 Hey dude this is not working , it shows a "," missing error
@@anishgoyal4424 sorry my mistake use = in setState(this.articles = parsedData.articles),this will work
@@abhishekbiranje4533 thanks
@@abhishekbiranje4533 you are telling use = in setState but where ? i got confused
My headlines are not getting populated on browser and there's no issue in compilation and it's not showing any error.. How to resolve it???
This react js couse is very helpful. Awesome teaching style.
fetch is not working please help me
@@FarhanAhmad-ll5fn there may a lot of reasons, it is impossible to track it without seeing the actual code, you may paste the errors here, we can see it.
One possible reason may by, you are not using localhost:3000, instead you are using 198.162.xx.xx ip address, using ip address will not work, instead open the localhost link,
other possible reason may be the wrong apikey, or a expired api key.
can you give me your mail so i send you pictures of output and code
I would comment in every video till you don't reply. I am really thankful to you. I didn't have cs in 12th but learned programming c and CPP from your videos and still learning. Moreover, I got a confidence boost. Once again thank you for your efforts.
My future job is depending on you harry bhai... Thanks a lot!
fetch is not working please help me
@@FarhanAhmad-ll5fn same problem, not able to update the articles data using useState()
bhai angular pr bhi ek full tutorial bhi bnao.usme kaafi problem aati h
3 videos under 2 hours
Make a tutorial on how to integrate react with django
Pls do make Redux series also 🙏
Sir jo react ka course hai aap ka 1.5hour k vedio hai
Wo or yhe react course same hain ya yhe different hai
I am having a problem during console log after running constructor render cdn again render is running why if you know the problem help out
Thank you via
till here done
Harry Bhai, Your courses are great and certainly the best on YT.
I would love to see a svelte course from you.
data are not coming in card which we used to populate the news items please help me
#HarryBhai, Harry Bhai, big fan. But I have a question, what is promise? I think I have missed this part. Can you please tell me in which video have you discussed about it?
Harri please show some examples --- how to use POST parameters with json body in Fetch APIs ?
fetch is not working please help me
Thank you so much sir ❤️
DidMount ko thoro explain bhi kar dete kya hua iss code m sbb upper se gya sir
brother you are doing a gr8 work . can u please teach me how to create an array in java
int [] arr={1,2,3,4,5}
another way is by mentioning the size-->
int [] arr= new int[4];
arr[0]=1;
arr[1]=2;
..
and do check the java playlist for detail.
bhai java ka poora course bna rkha h bhai ne
@@supratim08 tnx
Hello Harry Bhai,
I am in diploma, I want to buy a laptop, which processor is better for diploma and Degree of Information technology ?
intel i-3 or intel i-5 ?
ryzen-3 or ryzen-5 ?
Please reply me....
thanks
Incase If your articles is fetching and showing in console but not rendering in page, use this.state.articles in map function
facing same issue.. can you tell breifly
@@sheikhmuzamil7218
async componentDidMount(){
const res = await fetch(url);
const data = await res.json();
//Here I used this.setstate we must use this.articles.setstate//
this.articles.setState({ articles: data.articles
});
}
@@narasimha6470 The browser is saying that this.articles.setState is not a function
@@sehajdeepsingh7427 may be spelling Mistake of setState
@@narasimha6470 is this correct written in error code? this.articles.setState is not a function
Harry Bhaiya categories wise news fetch kijiye
Means that sports news ko sport category me
whoever getting error like this "TypeError: Cannot read properties of undefined (reading 'map')" please try this solution , change fetch(url) to
fetch(url).then((res) => res.json())
.then((json) => {
this.setState({
articles: json.articles,
loading: false
});
});
it should work
bro can you please send your code , as I am struggling from 3 days, but till now I am getting same error
thank you
make a full course on Kali Linux
while using fetch api ive been detected with this error messgae on console page " Uncaught (in promise) SyntaxError: Unexpected token '
Componentdidmount hi naam rakhan hai ya kuch or sir iss function ka 4:17
Kya isko Git pe deploy kar sakte he kya?
If someone is getting error "Cannot read properties of undefined (reading 'map')" then use this this.state.articles && this.state.articles.map((element) ....
Can you explain me
@@avadhut0007 It checks whether the array is NULL or not, if it is null then (i.e it will check this.state.articles is NULL or not ), if it is null then it will not run the code. We have to do this because if it is null then .map function will throw error.
@@framed5893sir ,I tried this but card item is not showing
Check if you added () after json like data.json();
After 2h of struggle I found out I have a spelling mistake, (articles -> articels) 🌚
Big Fan... Please make videos on AWS serverless
fetch is not working please help me
@@FarhanAhmad-ll5fn can you pls paste error which u got
@@RakeshBitling constructor() {
super();
this.state = {
articles: [],
loading: false,
}
}
componentDidMount() {
fetch(url)
.then((res) => res.json())
.then((json) => {
this.setState({
articles: json,
loading: false,
});
})
}
@@FarhanAhmad-ll5fn : Console Error
@@RakeshBitling send me your code bro
I have a doubt? Why we are changing articles in componentDidMount() and not in constructor() ?
Hey could you help me why fetch is not working?
@@rupalsaxena9837 yeah sure. send me the code
@@AbhinavSingh-uw6hh import react, { Component } from "react";
import NewsSite from "./NewsSite";
export default class News extends Component {
constructor() {
super();
this.state = { articles: [], loading: false };
}
async componentDidMount() {
let url =
"newsapi.org/v2/top-headlines?country=in&apiKey=7c7a544807b344a8be4cf266f97ca5ca";
let data = await fetch(url);
let parsedata = await data.json();
console.log(parsedata);
this.setState({ articles: parsedata.articles });
}
render() {
return (
NewsMonekey
{this.articles.map((element) => {
console.log(element.description);
return (
);
})}
);
}
}
Bhaiya mera JEE Ka paper khtm hogya h Mai coding sikhna chahta hu pr mujhe kuch pta nhi h kha se Start kru please give me suggestions 🙏
love the video sir
Friends, if your data is not fetched using API , then you can change your default browser from Chrome to Microsoft edge, this may fetch data, as I was struggling for 3days, and when I change the default browser it suddenly loded all the news
Consistency × 100😌
What to do if the image is not NULL and its "404 Image Not Found" , what if case should i write to tackle it.....ANY IDEAS ARE ACCEPTED.
componentDidMount me this.setState karne k baad mere console me to error hi nhi aa raha slice wala, fir bhi mere app me news update nahi ho raha API se
maza aa gaya
Is there any alternative of apis that can be used for deployment part
Maza Aaya🤗
Sir around how many videos will be there in the course.
fetch is not working please help me
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.
sir aap mic kon sa use karte hain
Hi pls do make Angular series with crud operations and jwt authentication and pls build a complete MEAN and MERN app
Error : When i click on next button it show me blank page error ( Cannot read properties of undefined(reading 'map')....... Help please 🙏
Hey I'm facing the same problem did you found the solution yet?
mazaaaaaa aagayaaaaa
maza arha hai :)