Live coding a Dropdown Component with React, Tailwind, and Typescript (Good Practice for Beginners)

Building a dropdown react widget on a live stream

My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets

------------

[RohanSingh-musq]

Good video.

My method is this :

When creating components with tailwind, just go to Flowbite and see how they are using static html to make a component. Then just copy that and one by one start adding dynamic classes based on props .
It saves a lot of time for designing 🙂

[crazylandse]

Love it! It would be amazing if we see more videos like this or ui elements series such as tabs, drawer menu, popup, snackbar, etc 🤓

[tadakuniyasuda]

Hi from Japan! I thank you and the internet for this amazing experience to practice next.js, react, typescript, and tailwind!! I was screaming at the computer screen "It is because of '!isCaretRight'" at 16:52! Anyways, thank you once again, and cannot wait to code with you through this channel!

[alishmadhukar]

Very good stuff but it is missing out certain functionalities like on clicking outside, it must close and on clicking a option also it should be closed.

[steinnhauser]

Loved this! Learning react and helps a lot to see stuff like this

[walidmkw]

For tailwind I use Headwind which gives standardisation in classnames (padding with padding, hover together at the and, dark mode too ...) It's a really good extension

[awekeningbro]

Amazing! Please make this a series. I really want to see a reusable Table component made from react and typescript

[clouatre]

Heroicons from the tailwind team are also great icons that work well with Tailwind!

[kimbapslayer]

What is that pop-up that suggests errors as your coding? Is that copilot or a different plugin?

[shaikhyamin]

Can you make a video like we have navbar and it have 4 link and on click we add active class on that link and Remove active class from the other 3 links.

Well i know this using vanilla javascript and same approach can be used in react by placing vanilla javascript code in use effect. But is there any other way?? Best best way?

[allbinardo]

i think it also should listen to other element click event
so it should be closed when element other than the dropdown is being clicked

[garrysyt]

Try to made a drop-down that opens on hover but that hover state must be preserved when you hover on its content . When you're hovering out close drop down . It should also work with onclick . Make 2, 3 such buttons and make then togalable

[setarose]

Is this code on your Github? Great Vid by the way I love your videos!

[hardwired]

Woahh cool, can u make form validation for complex input

[CottidaeSEA]

I'd probably do this a bit differently. I would solve the dropdown stuff entirely with CSS classes and let React only have to worry about adding and removing an is-active class. That way the DOM doesn't have to be changed a bunch as well, not that it matters much.
Main benefit is less complexity in React. The drawback is that it's harder to see where stuff is happening.

[gabrielalcantarabernardes]

why not create a variable to set the icon, something like: const CaretIcon = isExpanded ? <CaretDown /> : <CaretRight /> ?

[furo.v]

Your tailwinding looks like it's bootstrap lol

Nice work I like your shorts

[coldym]

Is conditional rendering is a way to go? I know I have seen somewhere that react portal is used for things like dropdown, modal etc

[davepascual]

For me, creating a triangle with border is really a pain to create. Though I create it with ::before pseudo of the container where it will be attached

[neil_from_future]

What theme you using, it's look good for my eye