Refactoring News component to use the same function | Complete React Course in Hindi #33

[@CodeWithHarry]

Playlist access kar lena: kzbin.info/aero/PLu0W_9lII9agx66oZnT6IyhcMIbUMNMdt If you are on Instagram, you can follow me there for more updates on courses & other stuff: Instagram.com/codewithharry

[@haseebkhalid4895]

Code ka link ?

[@musheer.ahmed.0]

Harry bhai ek bug aa rahi hain Jab aap next pay click karte ho first time toh page 1 hi rehta tha

[@MdArish-fj5pf]

Harry Bhaiya next page par click karne pe page state me update nhi ho raha hai newsupdate chalne ke baad page ko state me change kar raha hai

[@SaadAhmed-fp8il]

@@musheer.ahmed.0 aap se yeh bug remove ho gaya ???? bcz same issue me bhi face kr rahah hu

[@adkathait7569]

Q&A banado harry bahi #harrybhai

[@hamzarajpoot8388]

Already got 2 hearts from Harry bhi🥰

[@theZenyx]

Now 3

[@axnplayz3483]

There is one problem in Harry's code and that is in "UpdateNews function". When the user clicks in next btn then the same page which is page=1 is repeating again. When i click on next then i am getting the same news as it was in page=1 and after 2 pages the news are different. u can check it on 7:30

[@armaan.nagpuri]

Experiencing same problem...

[@axnplayz3483]

To solve it:- simple add +1 in page state

[@akhil_Khatrii]

Bro mera news api limit kal khtm ho gyi thi aj 24 hour bad chlaya fer dubara 24 hour likha ara h resetting time 😢

[@ahmadparizaad]

@@axnplayz3483 +1 is already added

[@divyangsurani2419]

toh bhai hum usme koi bhi nayi gmail se dusri id banake api code leke change kar doge toh chalega it is work@@akhil_Khatrii

[@priyampatel3144]

Harry Bhai! I dont know if i am too late to tell you this...I am currently learning Java Language from your tutorials, and to be honest :) I am literally so thankful to you for making such amazing tutorials, it is very helpful and easy to learn :)

[@suparnatripathi8992]

In this video there is a bug in componentDidMount method Next button is not working we are getting undefined in page variable

[@subhojit1741984]

Resolved that by setting this.setState({page: --this.state.page}) inside previous and this.setState({page: ++this.state.page}) inside next button

[@KalpakChakraborty]

@@subhojit1741984 this was helpful. Thanks. Also Saw a updateState function. Could use that method after researching about it

[@bhaveshjhawar9532]

For any new learner facing problem with the refactored code i.e(next button is showing the next page after second click) ........... Simply do this ---> handlePrevClick=async()=> { await this.setState({page:this.state.page-1}) this.updateNews() } handleNextClick= async()=> { await this.setState({page:this.state.page+1}) this.updateNews() }

[@harshilpatel3389]

Thanks bhai it worked. why this needs await please explain

[@lame6678]

thanks bro

[@vanshikasoni6950]

Thanks buddy... It worked!

[@ahmadrasheed2598]

@@harshilpatel3389 setState is Asynchronous thats why

[@tapassamanta5848]

Getting the hearts from him made this react course more attractive

[@shreshthavbisht1688]

Sir there is an error in the news app when you click to the next button the same page is reloading instead of next page 😅 please check and correct me if I am wrong. Thank you so much for this couse ❤️

[@mihirbari_mb]

ya got same problem, did you get any solution

[@sanjaysaha1120]

same problem.

[@prince3180]

@@sanjaysaha1120 next or prev btn mai 2nd parameter daal ke usse as a call back function receive karo

[@timepassscript]

its very easy await this.setState({page:this.state.page-1}) just add await in front of this.setstate(); hope this helps

[@lol_iris237]

@@timepassscript thanks, it works

[@navpan18]

Hats off to this guy , this much hardwork for us for free ❤️❤️❤️❤️

[@haseebraza8787]

harry bhai is video m jo 1st page h wo 2 br load hota jb hm next button pr click krty wo phr se load hota or us k bd next page pr jata click krny se

[@itsmytechnology9285]

This React Course is Very Very Helpful 🔥

[@shivangkhandelwal334]

Yaar Harry Bhai m ye series abhi dekh to nhi rha but manna padega aapki dedication ko...is frequency se videos aate hue mene pehle kbhi nhi dekha ! HATS OFF 🙇‍♂️

[@starkendeavours7072]

I'll catch up with this React Course soon, I'm learning CSS and Javascript from your channel Harry Sir ♥

[@anonymousgerman2809]

What's the update sir!

[@Karthik-kt24]

Really Reallyy Appreciate your efforts bhaiya🙏🙏🙏🙇‍♂️🙇‍♂️🙇‍♂️ You are a savior Thank you for working so hard to make all these easily understandable tutorials!! We really cant thank u enough Harry Bhai🙇‍♂️♥ I will surely support u once i start earning cause most knowledge i got from you only...Aap sikhate ho toh mushkil se mushkil dikhne wali cheez samaj aane lagti hai...thanku very much...Really underrated Teacher in the whole world🙏🙏🙏💯

[@mohituniyal7]

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.

[@CodeWith-Peer]

For search functionality: Add in Navbar component, 1. constructor(props) { super(props); this.state = { searchInput: '' }; } handleInputChange = (e) => { this.setState({ searchInput: e.target.value }); }; handleSubmit = (e) => { e.preventDefault(); this.props.onSearch(this.state.searchInput); }; 2. Add in App.js 1. constructor() { super(); this.state = { searchQuery: '' }; } handleSearch = (query) => { this.setState({ searchQuery: query }); }; 2. Add in News.js, async componentDidUpdate(prevProps) { if (prevProps.searchQuery !== this.props.searchQuery) { await this.updateNews(); } } *Don't forget to add q param in your API

[@arghadeepdey1422]

Thanks a lot! I had done the same as you did but had no idea about componentDidUpdate function.

[@majharulislam7433]

bro can you prove me with the git to see what you did idk why my api not working when i add &q=${encodeURIComponent(this.props.searchQuery)}`;

[@zethyst]

Thanks it worked!! Also I would like to add more intructions, in App.js, inside add

[@bulbergaming9142]

why is it not working for me i tried your code

[@zethyst]

@@bulbergaming9142 You gotta understand your codebase and figure out what's causing the trouble on your own kid.

[@keshavsharma9380]

Nothing left to say about u.. literally 12 videos in 24 hrs❤️ u r the savior

[@user-wl7ct4qz9m]

Bro cn u tell me how to comment out code without removing brackets.

[@Hunny_Singh]

@@user-wl7ct4qz9m ctrl + /

[@abramosekhawas2925]

Only after pressing next button for 2nd time, different news is visible otherwise same page is shown at 1st next click. Any idea why this is happening?

[@anantchandak9574]

not happening with me

[@CodeWhy]

You are the best one my favourite youtuber....☺️☺️☺️☺️

[@muhammadaarizimam4890]

harry bhai, aap ui mast design krte ho or code me to aap professional the hi. Hats off🔥🔥🔥

[@stupeee7056]

Harry bhaii In Android development one common error plz help that is Cannot resolve variable view ..

[@Stupeeylife]

Yess plz harry bhai same

[@nikedits912]

Harry bhai ham newsupdate function ki jagah componentdidmount ka use nahi kar sakte kya componentdidmount ko hi next button me state set call kar sakta hai kya?? Harry bhai Or anyone reply plz

[@ghulamhasnain859]

Thanks for such an amazing video

[@gnial2001]

mazaa aa gaya dear harry ... even in 2024 ... happy new year and God bles you!

[@sahilhans1867]

Kitne baar bhi thanks bolun Bhai kam h aapke liye, fir bhi bhai thankyou so much ❤️

[@aarush2108]

This react course is helpful

[@allaeibgaming2164]

Please continue your machine learning course

[@rahuldamale9699]

Hi sirji muze java script se start karna chahiye kya.....? Muze IT me aana hai muze 0 knowledge hai sirf c++ sub hua hai engee me batao plzzz🙏🏻

[@unfilteredshivam07]

Learning programing and Coding is Directly Proportional to Harry🔥

[@Pulkit_Jain]

One fix: this might be happening that on changing news with update news fun with next or prev, the same page loads once(i.e. page is not updated first time) You can fix this by using it with arrow function: this.setState({page : this.state.page+1}, ()=>{this.updateNews();});

[@yashh7449]

thank you so much, I was having the same issue

[@Pulkit_Jain]

@@yashh7449 welcome buddy

[@HarshitKumar-u4h]

handlePrevClick = async () => { await this.setState({page: this.state.page - 1 }) await this.upateNews(); } handleNextClick = async () => { await this.setState({page: this.state.page + 1 }) await this.upateNews(); } this problem is happening because (await) is not used as you can see my code . try above code it is correct.

[@sandhudevelops]

Hi pulkit... i tried but didnt work ?

[@Pulkit_Jain]

@@sandhudevelops make sure to debug everything including this

[@PIYUSH-lz1zq]

Awesome, Bar graph kaise show karva skte hai ??

[@allaeibgaming2164]

Please make course on machine learning

[@roktimashraful2085]

hey herry bhai !! apne notice kara ho ga ? ke jab apne next button pe click kar rahe ho tab page 1 se page 2 par same content dikha raha he jo ki page 1 pe tha , iska solution please ..

[@Sumeet_100]

ha mujhe bhi yahi doubt hai cansome explain this how to remove this error ?

[@anonymousmemer9613]

Bro ek qna video plz

[@prasantkumarray6302]

Harry bhai is the best youtuber for young ones

[@carsattitude]

Harry bhai web hosting and ka tutorial kab sa aiy ga.

[@not_amanullah]

This react course is helpful ❤

[@ItsMyWorld2]

Unity course plz

[@rishabhpandey-cse5thsem-453]

🙏🙏🙏Sir ek doubt h sir jo indian railway announcement system Usme sari announcement MP3 file ko play kaise kare ek k 🤔🤔🤔🤔🤔🤔 baad ek🤔🤔🤔🤔🤔

[@codinglover2858]

Thanks guru 🙏🏻🙏🏻

[@ishantyagi4862]

Thanks Harry sir ❤️❤️❤️

[@himanshuskatiyar5382]

Should we apply for masters from abroad , ilets , etc ways to go abroad related video banao Bhai ji plz

[@shoaibmulla5111]

Assalamu aliakum Haris Ali khan bhai❤️❤️❤️

[@siddhantchourasia291]

If someone facing issue like clicking next 2 times you can update the code like below for it to work. It's basically because setState is async so there is a possibility that fetch happens before this setState execution previousPage = async () => { this.setState({page: this.state.page - 1}, () => { this.updateData(); }); }

[@HarshitKumar-u4h]

handlePrevClick = async () => { await this.setState({page: this.state.page - 1 }) await this.upateNews(); } handleNextClick = async () => { await this.setState({page: this.state.page + 1 }) await this.upateNews(); } this problem is happening because (await) is not used as you can see my code . try above code it is correct.

[@sandhudevelops]

Tried but did not worked ?

[@ItsMyWorld2]

Angular playlist plz

[@vinitverma323]

Hi Just want to point out that after refactoring I noticed a glitch with my code i.e. when we click on next btn for the first time it just refreshes the first page and display the second page on second click and then works fine further, which I noticed in your video as well. I am still trying to solve it. Please have a look at it. btw thanks for your videos, really helpful.

[@SAURABHSINGH-xp8dm]

Bro I am also facing the same issue. Have you resolved it ?

[@ShivamSingh-ic4kh]

me too

[@gouravkhurana7937]

@@ShivamSingh-ic4kh See my solution

[@sreejitchatterjee4438]

@@gouravkhurana7937 Where is it?

[@timepassscript]

its very easy await this.setState({page:this.state.page-1}) just add await in front of this.setstate(); hope this helps

[@mohdsaqibansari9207]

Sir, There is one humble Request to you that...the placements are going on these days.Please make a series of Competitive Programms. Because we students lack in this sometimes. There's no place for us to get used to it. Please do guide us.

[@yogeshyts]

Competitive Programms se job ni lgti problem slving se lgti h

[@Mnssh564]

Sir when we open newsapp so initially white empty page arrise

[@rittwickbhabak7348]

this react js course is great

[@hiphop861]

Hat's off to you thank you.

[@technicalengineers6903]

My name is Ashwani, i have noticed a bug, after refactoring the next click function, when we click on next button, first page appears again (second time), further when we click on next button, everything works fine. Please consider it harry bhai...

[@udbhavvikramsingh3449]

How to solve it

[@Player-vj4xw]

@@udbhavvikramsingh3449 use "await" before setState in prevhandle and next handle this way pageno. will be updated before calling update() function

[@hritik8865]

Harry Bhai infinite scrolling bhi daal do iss app mei next ki jagah

[@akashtripathy1334]

Here in this video there ia a Bug... When we press next the 1st page is render for the send time

[@tapassamanta5848]

CodeWithHarry is never boring😊

[@santanukundu8719]

Sir please continue DSA cource... Please sir

[@hoctapit7719]

I am a Vietnamese person who looks forward to it, and sincerely wishes you to read this comment. Please turn on subtitles for me thank you

[@kirandixit5903]

Nice. This course is helpful

[@arzitmahajan7703]

After refactoring and using update function when You click the next button for the first time page 1 is rendered which means the user is never able to see the last page please tell the solution

[@inderjeetkaur8270]

Bhaiya can copilot become a nightmare for upcoming developer's job?

[@udbhavvikramsingh3449]

The problem is -- totalResults: 70 is showing but when i am going through all the pages (up to 8) only 38 articals are there in app ,page size set to 5. what is this 🤔🤔

[@solankiketul5640]

same here... plus, when harry bhai goes from 1st page to 2nd then the same 1st page gets loaded again see at 7:23

[@hamzaamin8857]

@@solankiketul5640 if you use await with updateNews() and also with this.setState then it will work fine. actually the state was not setting perfectly but if you use await then it will cause to wait for setting state and then you will get actual result.

[@solankiketul5640]

@@hamzaamin8857 Thank you for the solution

[@SAURABHSINGH-xp8dm]

@@hamzaamin8857 Thank u . It works

[@mohitgupta1381]

@@hamzaamin8857 Thanks buddy It's work

[@sampathacharya5276]

Harry bhai why r u making videos in the laptop whr did your beast go???

[@shivanshu_karn]

This video was helpful.....

[@tejaskumar4470]

Harry Bhai is on 🔥🔥🔥

[@chillu420]

#HELP! don't know why but my app is only using the defaultProps value not the propTypes value that I am sending through app.js i.e. even if I am setting the pageSize=15 in App.js , News.js is using the defaultProps value.

[@Amal-qh3uu]

Amazing video Harry bhai ❤️

[@MrChauhanjaved]

Thanks

[@ashu1764]

VUE JS Pe bhi koi course laiye sir ji kab se wait kar rha hu mai.

[@ItsMyWorld2]

Networking plz

[@virajmehta4237]

How can I build a search component that fetches data from the NewsAPI??

[@NipunRawat08]

page 1 ka next page 1 hi load ho raha hai and then ek or bar next karne par page 2 pe ja raha ahi or register 3 ho raha hai same problem with previous button

[@KishanSheladiya1]

this is because asynchronous nature of state updates in React. when we update the state using setState and immediately call the updateNews in handleNextClick and handlePrevious function the state is not changed .you can use the callback like this .this ensure the updateNews() is called after the state has been updated. handleNextclick = () => { this.setState( (prevState) => ({ page: prevState.page + 1 }), () => this.updateNews() ); }; handlePreviousclick = () => { this.setState( (prevState) => ({ page: prevState.page - 1 }), () => this.updateNews() ); };

[@rajann44]

Harry Bhai OP 🔥

[@arbatheindiangamer]

Bhai blogger k upar video bnao ki ham coding s blogger ki templates kese bhai pls Bhai news them

[@mumairmughal9865]

Harry bhai, I have a question! We were using "if(!(this.state.page + 1 > Math.ceil(this.state.totalArticles/this.props.pageSize)) )" to make "Next" button disabled when there are no next pages. But when you added the "updateNews" function, how the next button was disabling without the above "if" condition? Kindly let me know about it. Thanks

[@shriyanshagarwal6910]

render function m ussi button ke tag me disabled lagaya tha issi condition ke sath to function me check karne ki zaroorat nhi h

[@mumairmughal9865]

@@shriyanshagarwal6910 Thanks

[@mananbansal9362]

You Are Legend Sir ❤️💓❤️💓❤️💓

[@AmritSingh-yx8ew]

Thank you sir

[@samuelfrank1369]

Thanks a lot #HarryBhai

[@udbhav3760]

God of coding (harry)

[@msbasera]

Thank you bhai❤️

[@nikhilgarg4952]

This course is really helpful

[@mananbansal9362]

Love You Harry Bhai

[@arzitmahajan7703]

please check bhai on clicking the next button the first page is rendered not the next page

[@rootbattlegrounds7948]

HARRY BHAIII IS OP

[@codee1949]

Hello Harry bhai

[@rahulermbd]

Anyone is getting error in the end of the page when loading is not to false, I mean loading is still running when all articles are already fetched.. ? Spinner is running in the end of the page

[@saikrishna7004]

Got likes hatrick from Harry bhai 🥰🥰🤩

[@CoderFromMathura]

Plzzz sir make video on game development 🙏🙏🙏 using javascript framework

[@anonymousmemer9613]

Bro from where you are

[@sainathpatil2820]

And anyone who is accessing app in mobile will get an error because , in api documentation it is mentioned that api will only work in localhost

[@gatplace2738]

My first page newsitem not display but when i click on next then new newsitem display and then i click on previous then my first page newsitem display Please Help me

[@swastiksingh9144]

Hi sir 401 view i am seeing your web development corse and my age is 11 years old hi

[@wisdomkhan]

Hwne i do the above changes my next and pre buttons don't work as expected and the pageSize is set to API default of 20 for every page.

[@progamer-vk2jv]

Harry sir aap apke outro ke background music me konsa music use karte hain

[@RohanDasRD]

Awesome bhau

[@adkathait7569]

Q&A banado hrry bhi #harrybhai

[@anonymousmemer9613]

Bro kya Apne IIT crack Kiya tha

[@pravallika_09]

news daily update karne keliye kya coding karna

[@tapassamanta5848]

I got 4 hearts today. Can I get more one please?

[@tapassamanta5848]

You're awesome

[@samarjeetsingh1710]

harry sir yeh jo apne updateNews() wala function bnaya uske baad ab jab next pe click kr rahe hai toh pehli next click pe same page ki news dikha rha lekin jb second time click kro next pe tb agle page ki news dikhata hai PLEASE RESOLVE THE ISSUE

[@HarshitKumar-u4h]

handlePrevClic k = async () => { await this.setState({page: this.state.page - 1 }) await this.upateNews(); } handleNextClick = async () => { await this.setState({page: this.state.page + 1 }) await this.upateNews(); } this problem is happening because (await) is not used as you can see my code . try above code it is correct.

[@Mr_Roy688]

Refectoring news component to use the same function is not working when clicked on the next & previuos button, rendering again on the same page , page not changed

[@premanshujha2449]

I dont know if anyone noticed but for 1st 2 clicks,u r getting the same news,means there is a delay in state change.

[@HarshitKumar-u4h]

handlePrevClick = async () => { await this.setState({page: this.state.page - 1 }) await this.upateNews(); } handleNextClick = async () => { await this.setState({page: this.state.page + 1 }) await this.upateNews(); } this problem is happening because (await) is not used as you can see my code . try above code it is correct.

[@sandhudevelops]

Have you solved it i am getting same issue?

[@sandhudevelops]

​@@HarshitKumar-u4h i tried but didnt worked dont know whats wrong ?