🔴 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
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
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
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
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.
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 :)
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?
Can you make a video on a problem which is ehen we hover on the picture it will only zoom in that part of pic but do not increase the whole scale of the pic
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.
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
@@RoadsideCoder okay, thanks. Aprreciate your reply. Hey, pls also make more videos of frequently asked machine coding questions and also system design for Frontend
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.
[...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......
bhai itni video editing or planning k bad you are able to do it in 25 min approx , agr real scenario k hisab se adjust kre to it would take an average coder 40-50 mins to do same amount of coding that you did here with all sort of planning and editing or wo bhi jb sab kuch use rta hua ho, and stil some time goes in handling error ....... to kis angle se hum is bat ko digest kre ki interview ek question /hr k hisab se chlega ........... koi sense ha is bat ka and your every video says ye bhi pucha jata ha , with atleast half hour coding .... mtlb bhai kuch bhi ????????????????
🔴 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
Request ya dhamki?
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
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
One of the rarest live coding video that I watched till the end.
Keep up the good work bro, you just earned a subscriber!
🙏
Please make more such videos on machine coding. This content is just wonderful 🧡
More here - roadsidecoder.com/course-details
Now I am addicted to your content 😂 Amazing video on Frontend drived pagination 😎🙌
With the help of your video and your UA-cam channel, I cracked the interview.
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
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
Thanks to you Man! Finally, I landed a job! :D
Congrats man!
@@RoadsideCoder🎉👍🙏
How
@@khanasif1654 by preparing
great playlist, binging your channel since last few days :) Plese keep up the good work
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.
Very nice video, i am learn many new things from your videos...
Please create videos on backend development coding interview rounds... Thank you.
Nicely Explained Bro . I am a new to the React .. good to know the stuff.
I did not know about BEM convention till now. Thanks
Brother, You are live saver Dude
🙏
Your videos are awesome please continue making the front end interview coding series
Thanks. Need more videos like this.
Informative...Easy to understand.....Keep it up
the best explanation video creator in development world thank
u so much
Thank you, man! Always relevant content, well explained and structured.
Thanks a lot,please make videos on backend too
Bro you are unique, i love you brother , keep grow with us brother❤
Great! your teaching style is very good
14:03
const length = products.length/10
const array =Array.from({length});
It much better than taking Array Constructor
where i put these line of code
Amazing tutorial, very easy to understand !!
3:23 we have to convert it into json or we have to convert it from json
Nice to see your video again brother.
Thank you. i just implimented this soluion in one of my side project :)
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 :)
mostly there's freedom to choose, but in very rare cases they might ask u to do it in vanilla JS
@@RoadsideCoder thanks!
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?
i just watched a piece of gem great video applause to your effort thankyou buddy!!!
Much appreciated!
Why did you use Array keyword and spread the array??? ...Array
14:43
please create more content on testing in React.
Can you make a video on a problem which is ehen we hover on the picture it will only zoom in that part of pic but do not increase the whole scale of the pic
sure
very easy to follow , could you please video on code splitting and infinite scrolling
Yes
Hai I have one doubt when user refresh page that goes into our insial page how to Handel that thing
It's amazing. Thanks bro
Will you make a video on *onscroll* pagination
Really good content. 😀
please make videos on React like this 🥰🥰
Great explanation. Thank you :)
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.
U will atleast have 1 hour
@@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?
Sublime explanation 😎😎
Please make 1 Playlist for backtracking in DSA for for beginning easy and hard question
Please Do the series on JavaScript Design Patterns
Hello brother, all of your video is much much helpful just a free advice please manage your some playlist with the same .
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
Same question I was asked yesterday in an interview
Which company asked this question ❓
In a situation where one product is returned instead of the whole or few products, this is will throw an error..
thanks alot bhai for this video ,
Ezz to understand, thanks
Thanks well taught
great video bhai😊 and I am living in same location where you are living bro. 😅
That's great!
i was not able to get that setTotalpages() in last, can anyone explain it to me?
Please make a next js project which will cover every topic.
Great content! thanks
What if there are 500 posts then there will be around 50 pages and how would we display the pagination
Don’t display all of them. Display current, a few previous, next pages and last page. See how google does it
why are we doing underscore, index inside map function?
Its just a placeholder when we don't want to use that value
@@RoadsideCoder okay, thanks. Aprreciate your reply. Hey, pls also make more videos of frequently asked machine coding questions and also system design for Frontend
Sir the faker sends only 2-3data 😭 pls reply
Keep doing good work
5 mins in subbed ❤
Thank you man
etcetera instead of etceptra, nice.
Please make video on infinite scrolling also
Great work
I need interview tips from u
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.
I dont have it. But u can try to make it. Will be easy
@@RoadsideCoder sir i can't make it, I am little bit confuse about entity and attributes,that's why I told you
@@RoadsideCoder if you can just give ER diagram and Tables, it would be very helpful.
Hello sir, please reply I've to report it by Tomorrow
very informative
Very good love form pakistan
thank you very much , 👍
You are as cool as jonny bravo :D
Please one video upon react nested router dom
This one is better approach
great video
any reason why you are preferring span over native button tag?
To explain "cursor : pointer" point
[...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......
It's still throwing invalid error length
Awesome
bro awesome
thank youu!!
setTotalPages(data.total/10) should be setTotalPages(Math.floor(data.total / 10)) so that totalPages would be a whole number.
Bro did you do this project?
IT WILL BE MATH.CEIL() otherwise we will lost the data of few products .
Thank u sir
Hitting like a button before watching video
you r awesome
Please make video on Redux and Saga🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴
❤
Good day greetings
It's not an efficient way pagination. Because you get all the products by single api call..
thats api issue, api should have the query to fetch max 10-15 products at a time.
why in map(_ ,1) pls someone explain
Here we only need those index not the element. so we are simply putting _ in the place of array element
instead of _ u can put anything u want although there is no use of that.
🙏👍
[...Array (products.length/10)] throw error 'invalid array length' NaN
You went incognito mode 🤔
why you have so less subscriber ?
because you haven't shared this video on linkedin yet 🥹
That etc. 😂
bhai hindi me kyon video nahi banate ho
90年代末2000年初， 在华为中兴 当 leader 研发中心 当 leader 一年二三十w，在所谓的西安家人亲属 眼中 远远不如 国企事业单位每月6-
I don’t understand what you say,im sorry)
Bnany ka msla ni ha bro... Ab sari game Smjhny ki ha
{typeof tradeDetails?.result?.docs?.length === 'number'&& new Array(Math.ceil(tradeDetails?.result?.docs?.length / 4)).fill(0).map((_,i)=>{i+1})}
bhai itni video editing or planning k bad you are able to do it in 25 min approx , agr real scenario k hisab se adjust kre to it would take an average coder 40-50 mins to do same amount of coding that you did here with all sort of planning and editing or wo bhi jb sab kuch use rta hua ho, and stil some time goes in handling error ....... to kis angle se hum is bat ko digest kre ki interview ek question /hr k hisab se chlega ........... koi sense ha is bat ka and your every video says ye bhi pucha jata ha , with atleast half hour coding .... mtlb bhai kuch bhi ????????????????
1 hr ka minimum time hota hai.
Also, its not just u, sabko milta hai aur sab krte bhi hai. So try to get better in managing time.
3hrs thodi milenge tujhe bhai iske liye
Too difficult and impractical questions.
I don't think anyone asks this in interviews
What this is the easiest one, but the truncated version of pagination is way harder than this