React JS Interview Questions ( Pagination ) - Frontend Machine Coding Interview Experience

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
#JavascriptInterview #ReactInterview #ReactJS
React Interview Question on creating Pagination for a List of Data will be created in this video along with tips and tricks to tackle your React JS and JavaScript Questions in Frontend Machine Coding Interviews.
➡️ Book an Interview Preparation call with me -
topmate.io/roadsidecoder
🟦 Follow me on Twitter and u will clear your interview 🤓 -
/ piyush_eon
➡️ Source Code -
github.com/piyush-eon/fronten...
🔗 Frontend Machine Coding Interview Series -
• Frontend Machine Codin...
🔗 Map, filter and reduce -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 MERN Stack Tutorial with Redux -
• MERN Stack Project Tut...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
-------------------------------------------------------------------------
00:00 Intro
00:34 What is Paginaton?
01:27 Problem Statement
02:35 Fetch Products Data
05:15 Render all Products
10:37 Pagination Implementation
16:04 Page Selection Logic
17:30 Next and Previous Page Logic
20:09 Backend Driven Approach
24:18 Get Interview Preparation call with me
-------------------------------------------------------------------------
⭐ Support the channel and learn from me One on One -
/ @roadsidecoder
Special Thanks to our members -

[@RoadsideCoder]

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details 🟪 Follow me on Instagram and u will clear your interview 🤓 - instagram.com/roadsidecoder/ ➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder

[@rishiraj2548]

Request ya dhamki?

[@ehsankabir5235]

Client side pagination is useless if you fetch all the data at once what's the point of pagination, you definitely should make a backend pagination functionality

[@ninjaplavi]

Thank you, man! Always relevant content, well explained and structured.

[@Sandeep-zd6dq]

Now I am addicted to your content 😂 Amazing video on Frontend drived pagination 😎🙌

[@navvneat]

One of the rarest live coding video that I watched till the end. Keep up the good work bro, you just earned a subscriber!

[@RoadsideCoder]

🙏

[@sandeshpetkar568]

Your videos are awesome please continue making the front end interview coding series

[@ANANDKUMAR-in3pc]

With the help of your video and your KZbin channel, I cracked the interview.

[@usmanrangrez-cd7zj]

Thank you. Another reasy approcah for disabling can be: CSS: :disabled { opacity: 0; } JSX: setPage((prev) => prev - 1)} disabled={page === 1} > Prev setPage((prev) => prev + 1)} disabled={page === noOfPages} > Next

[@dacratos416]

the best explanation video creator in development world thank u so much

[@Ath9493]

I did not know about BEM convention till now. Thanks

[@abhisektripathy9864]

Nicely Explained Bro . I am a new to the React .. good to know the stuff.

[@ramkrushnaprabhu8027]

Very nice video, i am learn many new things from your videos... Please create videos on backend development coding interview rounds... Thank you.

[@anubhapant5227]

Please make more such videos on machine coding. This content is just wonderful 🧡

[@RoadsideCoder]

More here - roadsidecoder.com/course-details

[@Krishnasaini]

further enhancement - 1. instead of mapping Array(Product.length/10) , make it more generic so that in future if PM wants only 5 or 8 elements per page, this should be a simple change. above logic will fail for such edge cases 2. add key prop everytime you use map 3. add accessibility features like tabIndex, role, should be clickable via enter key 4. make it responsive

[@devuthakkar1602]

Thanks. Need more videos like this.

[@nileshkumar4547]

Amazing tutorial, very easy to understand !!

[@koushithb.r3984]

Thank you. i just implimented this soluion in one of my side project :)

[@sravan8643]

Great explanation. Thank you :)

[@ritikrathour8081]

Great! your teaching style is very good

[@keshavkishorram7678]

Thank you for this amazing content.

[@purusharma8192]

Thanks a lot,please make videos on backend too

[@priyankaphadtare3783]

Informative...Easy to understand.....Keep it up

[@mohitsaud2071]

Nice to see your video again brother.

[@farmanmohd2607]

It's amazing. Thanks bro

[@perry8936]

i just watched a piece of gem great video applause to your effort thankyou buddy!!!

[@RoadsideCoder]

Much appreciated!

[@jeetvora331]

Sublime explanation 😎😎

[@abdu5822]

please create more content on testing in React.

[@aniketjain6886]

Hello brother, all of your video is much much helpful just a free advice please manage your some playlist with the same .

[@jhaeberli]

Great content! thanks

[@abdulrazzak2934]

thanks alot bhai for this video ,

[@tejaskulkarni7127]

Really good content. 😀

[@ehsankabir5235]

Client side pagination is useless if you fetch all the data at once what's the point of pagination, you definitely should make a backend pagination functionality

[@canra245]

Ezz to understand, thanks

[@anshphirani]

please make videos on React like this 🥰🥰

[@abrahamouattara8757]

thank you very much , 👍

[@priyankaphadtare3783]

Please Do the series on JavaScript Design Patterns

[@jatilyadav4000]

Great work

[@kshitijsingh609]

Keep doing good work

[@Dext-err]

thank youu!!

[@abdulrazzak2934]

very informative

[@gauravparihar6962]

great video

[@srishtikhobragade7693]

very easy to follow , could you please video on code splitting and infinite scrolling

[@RoadsideCoder]

Yes

[@VishalSharma-rn7mt]

Awesome

[@trendingshorts9166]

Please one video upon react nested router dom

[@samarscript5824]

14:03 const length = products.length/10 const array =Array.from({length}); It much better than taking Array Constructor

[@fahadraza7152]

where i put these line of code

[@jaspersanchez7606]

Thanks to you Man! Finally, I landed a job! :D

[@RoadsideCoder]

Congrats man!

[@rishiraj2548]

​@@RoadsideCoder🎉👍🙏

[@samarthdevli6968]

Which company?

[@khanasif1654]

How

[@boogleba126]

5 mins in subbed ❤

[@asynctushar]

Please make a next js project which will cover every topic.

[@AlishaKhan-mq1nl]

Please make 1 Playlist for backtracking in DSA for for beginning easy and hard question

[@sachinpandey7751]

bro awesome

[@shyammp6255]

Thank u sir

[@SaiKumar-tg6ct]

Will you make a video on *onscroll* pagination

[@himanshuarora1910]

3:23 we have to convert it into json or we have to convert it from json

[@shakilahmed6870]

So what if you have 1000 products and you need 100 buttons for that. In that case you are not showing 100 button at once right? I dont know why all the pagination video on youtube skips this part.

[@karthikvijay5]

Hai I have one doubt when user refresh page that goes into our insial page how to Handel that thing

[@shyammp6255]

I need interview tips from u

[@zabiullah92]

Please make video on infinite scrolling also

[@SushilKumar-xh1dv]

you r awesome

[@waqasrana5734]

You are as cool as jonny bravo :D

[@jeetudewangan9836]

But it just changing the data not the page. whenever we click on next or prev button it just change the data and whenever user click on next or prev button page must start with top of the page and also page number should be change on url . How to achieve this?

[@imranahmed3366]

Same question I was asked yesterday in an interview

[@Sai_ku_ma_r]

Which company asked this question ❓

[@anshumanxda]

etcetera instead of etceptra, nice.

[@rishiSingh0898]

i was not able to get that setTotalpages() in last, can anyone explain it to me?

[@ashwinpatidar2878]

This one is better approach

[@awais_ansarii]

❤

[@rishiraj2548]

Good day greetings

[@heyyyyyworld]

Hello! Thanks for the video! I had one query, do companies expect us to code using react or vanilla JS during the machine coding round? Or is it our freedom to choose? Thanks in advance :)

[@RoadsideCoder]

mostly there's freedom to choose, but in very rare cases they might ask u to do it in vanilla JS

[@heyyyyyworld]

@@RoadsideCoder thanks!

[@rishiraj2548]

🙏👍

[@thiagosoares5052]

Would it be possible for us to develop an application for android where we can make a launcher to change the face of android, I live in Brazil and although I don't speak and understand English I like your teaching. I will be grateful for the return

[@shahhussain56]

great video bhai😊 and I am living in same location where you are living bro. 😅

[@RoadsideCoder]

That's great!

[@hashirmughal5625]

Very good love form pakistan

[@likhitverma9661]

Please make video on Redux and Saga🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴

[@rohithchittibommala2002]

any reason why you are preferring span over native button tag?

[@RoadsideCoder]

To explain "cursor : pointer" point

[@JohnDavidO]

In a situation where one product is returned instead of the whole or few products, this is will throw an error..

[@IllIIIIIIllll]

Sir the faker sends only 2-3data 😭 pls reply

[@franklinmayoyo]

You went incognito mode 🤔

[@RichaKejriwal]

why are we doing underscore, index inside map function?

[@RoadsideCoder]

Its just a placeholder when we don't want to use that value

[@RichaKejriwal]

@@RoadsideCoder okay, thanks. Aprreciate your reply. Hey, pls also make more videos of frequently asked machine coding questions and also system design for Frontend

[@herry22]

Hello sir, I need your help. Sir, do you have ER-Diagram, Tables, & 1 level DFD from your cryptocurrency tracker app? If you have please share it with me.

[@RoadsideCoder]

I dont have it. But u can try to make it. Will be easy

[@herry22]

@@RoadsideCoder sir i can't make it, I am little bit confuse about entity and attributes,that's why I told you

[@herry22]

@@RoadsideCoder if you can just give ER diagram and Tables, it would be very helpful.

[@herry22]

Hello sir, please reply I've to report it by Tomorrow

[@BrijeshSingh-dp1ku]

That etc. 😂

[@divyanshurawat2422]

What if there are 500 posts then there will be around 50 pages and how would we display the pagination

[@piyush6631]

Don’t display all of them. Display current, a few previous, next pages and last page. See how google does it

[@prabhatkashyap8333]

bhai you took 24 mins to make this suppose if we need to make this in machine coding round how much time we will get? coz sometimes it takes time to thing for logic and some time for CSS google search as well.

[@RoadsideCoder]

U will atleast have 1 hour

[@prabhatkashyap8333]

@@RoadsideCoder ok bro and what if we have DSA round online OA then can we use JAVA as coding language? or do we have to use JS only?

[@debojitsaha5884]

setTotalPages(data.total/10) should be setTotalPages(Math.floor(data.total / 10)) so that totalPages would be a whole number.

[@IllIIIIIIllll]

Bro did you do this project?

[@shashank3758]

IT WILL BE MATH.CEIL() otherwise we will lost the data of few products .

[@rakeshkharvi4145]

Hitting like a button before watching video

[@elias-soykat]

It's not an efficient way pagination. Because you get all the products by single api call..

[@karanbhoite9552]

[...Array(products.length/10)].map......... and what if data length is 99 instead of 100 It would work as [ ...Array(9.9) ].map... which is invalid .... a slight change as below ... [...Array(Math.ceil(products.length/10))].map......

[@ItsEskimo]

It's still throwing invalid error length

[@raki0125]

why in map(_ ,1) pls someone explain

[@softwareengineering101]

Here we only need those index not the element. so we are simply putting _ in the place of array element

[@karanbhoite9552]

instead of _ u can put anything u want although there is no use of that.

[@sunilsarode152]

why you have so less subscriber ?

[@RoadsideCoder]

because you haven't shared this video on linkedin yet 🥹

[@pixel631me]

bhai hindi me kyon video nahi banate ho

[@Leo-jh3nj]

90年代末2000年初， 在华为中兴 当 leader 研发中心 当 leader 一年二三十w，在所谓的西安家人亲属 眼中 远远不如 国企事业单位每月6-

[@zaurhuseyn4432]

I don’t understand what you say,im sorry)

[@Colours_and_Crafts]

[...Array (products.length/10)] throw error 'invalid array length' NaN

[@ItsEskimo]

{typeof tradeDetails?.result?.docs?.length === 'number'&& new Array(Math.ceil(tradeDetails?.result?.docs?.length / 4)).fill(0).map((_,i)=>{i+1})}

[@usa5450]

Too difficult and impractical questions. I don't think anyone asks this in interviews