🔴 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
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
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
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 :)
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
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?
@@RoadsideCoder okay, thanks. Aprreciate your reply. Hey, pls also make more videos of frequently asked machine coding questions and also system design for Frontend
[...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......
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.
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
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.
🔴 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
One of the rarest live coding video that I watched till the end.
Keep up the good work bro, you just earned a subscriber!
🙏
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
Now I am addicted to your content 😂 Amazing video on Frontend drived pagination 😎🙌
Please make more such videos on machine coding. This content is just wonderful 🧡
More here - roadsidecoder.com/course-details
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
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
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
With the help of your video and your TH-cam channel, I cracked the interview.
Cannot thank you enough for this playlist, brother!
the best explanation video creator in development world thank
u so much
Thanks. Need more videos like this.
Thank you, man! Always relevant content, well explained and structured.
Nicely Explained Bro . I am a new to the React .. good to know the stuff.
Brother, You are live saver Dude
🙏
Informative...Easy to understand.....Keep it up
Your videos are awesome please continue making the front end interview coding series
Nice to see your video again brother.
Great! your teaching style is very good
Very nice video, i am learn many new things from your videos...
Please create videos on backend development coding interview rounds... Thank you.
Amazing tutorial, very easy to understand !!
I did not know about BEM convention till now. Thanks
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
at the end he did it ??
i just watched a piece of gem great video applause to your effort thankyou buddy!!!
Much appreciated!
Really good content. 😀
Thanks a lot,please make videos on backend too
Thank you. i just implimented this soluion in one of my side project :)
Great explanation. Thank you :)
Bro you are unique, i love you brother , keep grow with us brother❤
Sublime explanation 😎😎
Thank you for this amazing content.
Great content! thanks
5 mins in subbed ❤
thanks alot bhai for this video ,
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.
Just use slice
3:23 we have to convert it into json or we have to convert it from json
Ezz to understand, thanks
Keep doing good work
Great work
Thanks well taught
very easy to follow , could you please video on code splitting and infinite scrolling
Yes
Thank you man
thank you very much , 👍
You are as cool as jonny bravo :D
Why did you use Array keyword and spread the array??? ...Array
14:43
please create more content on testing in React.
great video
very informative
great video bhai😊 and I am living in same location where you are living bro. 😅
That's great!
Same question I was asked yesterday in an interview
Which company asked this question ❓
Hello brother, all of your video is much much helpful just a free advice please manage your some playlist with the same .
thank youu!!
bro awesome
Awesome
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!
Thank u sir
please make videos on React like this 🥰🥰
Hitting like a button before watching video
Please Do the series on JavaScript Design Patterns
What font are you using?
you r awesome
Will you make a video on *onscroll* pagination
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
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 .
Very good love form pakistan
Please make a next js project which will cover every topic.
This one is better approach
Please make 1 Playlist for backtracking in DSA for for beginning easy and hard question
Hai I have one doubt when user refresh page that goes into our insial page how to Handel that thing
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?
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
etcetera instead of etceptra, nice.
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
Please make video on infinite scrolling also
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
i was not able to get that setTotalpages() in last, can anyone explain it to me?
Please one video upon react nested router dom
Good day greetings
I need interview tips from u
❤
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
🙏👍
In a situation where one product is returned instead of the whole or few products, this is will throw an error..
Please make video on Redux and Saga🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴
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
Sir the faker sends only 2-3data 😭 pls reply
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?
You went incognito mode 🤔
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.
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.
That etc. 😂
why you have so less subscriber ?
because you haven't shared this video on linkedin yet 🥹
90年代末2000年初， 在华为中兴 当 leader 研发中心 当 leader 一年二三十w，在所谓的西安家人亲属 眼中 远远不如 国企事业单位每月6-
bhai hindi me kyon video nahi banate ho
I don’t understand what you say,im sorry)
Bnany ka msla ni ha bro... Ab sari game Smjhny ki ha
[...Array (products.length/10)] throw error 'invalid array length' NaN
{typeof tradeDetails?.result?.docs?.length === 'number'&& new Array(Math.ceil(tradeDetails?.result?.docs?.length / 4)).fill(0).map((_,i)=>{i+1})}