Custom Dropdown using React.js | REACT CUSTOM COMPONENT |

Custom Dropdown | select using react.js. The following code is available on coding sandbox
link for the sandbox - codesandbox.io/live/3vohdkw
#customComponent #react #html #css #dropdown #customDropdown

[@raphaelrychard5440]

Perfect video, great tutorial on how to create a custom dropdown

[@jongomezdev]

the easiest solution out of hundreds.. KEEP UP THE GOOD WORK

[@poolcaceres493]

It has been a year and its still a really good tutorial

[@pitambarjadhav9984]

precise and up to the point thank you.!

[@ellsonmendesYT]

kind of css carret
.carret{
transition: all .2s;
position: relative;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ddd;

}
just stick it inside the dropdown-btn
:)

[@downsiteup1]

made my day, thanks a lot

[@amoriblain3655]

Great job! Thank you very much

[@ellsonmendesYT]

3:39 as a miracle the carret appeared lol

[@dennisfisher2684]

It's cool! ) Thanks )

[@AminSani]

It seems like this session (Codesandbox) doesn't exist or has been closed

[@user-ng8bj8uz5n]

👍👍👍

[@thebigman9341]

thanks for the awesome video

[@islombektadjiyev793]

Perfect ! Thanks bro

[@foxymizer]

in what time did you add an arrow?

[@AliRazaTruth]

thanks so much bro for this helpfull tutorial .

[@letsexplainme]

sandbox link is not working

[@sancharidas7923]

I want to place two dropdowns placed side by side. Can you please tell me how to do that. Thank you.

[@user-rr7yr9ml9p]

Thanks!

[@techcareweb6613]

Welcome!

[@abusalimansari6279]

thank you sir video is awesome thx for help

[@manojrao9867]

how did you get drop down arrow beside "Choose One" for bold property. Am I missing anything please let me know.

[@tanishkaborkar9754]

see some video on react-icons you will get an clear idea then

[@rajbannasa7662]

Thank you so much sir ❤️

[@ekta_shukla9248]

Can i get the link of the whole code..!!it would be helpful

[@abelardoblog]

Hey how I can use the same drop-down but with different information ? Amazing video 😊

[@sidharth-singh]

What happens if I use this as a dynamic component and it is at the bottom of viewport. I want the dropdown to open at top. I have been looking for this solution for over a week.

[@techcareweb6613]

You can assign a ref to the drop-down element and check for getBoundingClientRect()

[@user-tn5qb6xw6h]

Super!!!!

[@emreozgun3846]

I'd manipulate opacity/visibility with transition by adding/removing classes instead of conditionally rendering.

[@techcareweb6613]

Yes, you can do that as well.

[@rishitachoubey6054]

The sandbox link is not working

[@techcareweb6613]

codesandbox.io/s/jolly-proskuriakova-pj2tk

[@sabareeshsk1326]

@@techcareweb6613 thank you, please put this in the description for others too

[@hrishikeshdeoghare4359]

nice

[@ekta_shukla9248]

Sandbox link is not working

[@pritech8302]

thankyou so much sir

[@chenaplayz3263]

Hi how do you handle click outside with the code in the vid

[@yatut4467]

He doesn't handle it.

[@ayushsingh-re7dn]

GREAT JOB! WORTH THE SUBSCRIBE! GOOD DAY..

[@jaykrishnanandagiri3436]

what about choose one it is not displaying in dropdown because it should display by default right

[@SiddharthSingh-vu1ke]

add this under {selected} in App.js

[@abrahamjoseph3080]

Hello it's been 2 years since this but this video just saved my job, Please can anyone help with adding a reset button, so selection can be cleared instead of refreshing the browser

[@thegeneralcategory2792]

thnq

[@fogset3005]

i can not see the code

[@rayhadif]

i cant use it twice pls help

[@nikeshkumarrakesh6296]

code is not working.

[@alibalbars5177]

instead of using 95% width you can use box sizing border-box 5:41

[@anirudhagandhare6294]

Thank you for the correction 👍

[@codingroom928]

clicking outside is unsolved...

[@techcareweb6613]

I'll make a new video soon to cover that as well. For now you can use a hook by mantine-ui called use-outside-click

[@nickbenton2828]

i absolutely cannot stand the fact that they are moving lines for no reason, and cant even put a text explanation to what they are moving and to where. I have rewatched this section of the tutorial 15 times and im about to decide its pointless.

[@techcareweb6613]

I'll be updating the video soon, it's quite outdated.

[@thanhnguyenhuy8725]

nice

[@akashtambe11]

Sandbox link is not working