i see many problems with this approach. here's just a few:
your approach completely ignores accessibility principles. everything is a div, why?
you wrote a lot of code to make a very simple element. why not use a native element?
i don't see how this is reusable. i can use this only in react, right? the styles are also baked into the component so no way for me to use this outside of react.
In order to save lines of code I was forced not to focus on the accessibility side, I leave you an example with which you can guide you to add the accessibility points github.com/Semantic-Org/Semantic-U..., github.com/Semantic-Org/Semantic-U.... I used div because is more comfortable to build a custom select component, you can see any "Select" component of famous react components libraries, in fact, this tutorial is base on "Select" component made by geist-ui github.com/geist-org/react/blob/ma... currently used by Vercel.
Is not a simple component, I know you can use and HTML tag but is not common use it because is more complex to customize, you can see famous React libraries and they all use custom code to do it, for example, Material UIhttps://github.com/mui-org/material-ui/tree/next/packages/material-ui/src/Select
Is totally reusable in React, you can't use this code in another framework/library without adapt because of it's based on the React API such as useMemo, useCallback, etc...
And remember the main goal of this tutorial is to learn about the Compound Pattern in React so that you can use it in any component.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
i see many problems with this approach. here's just a few:
Hi ronca85, I will answer you with pleasure:
In order to save lines of code I was forced not to focus on the accessibility side, I leave you an example with which you can guide you to add the accessibility points
github.com/Semantic-Org/Semantic-U..., github.com/Semantic-Org/Semantic-U.... I used div because is more comfortable to build a custom select component, you can see any "Select" component of famous react components libraries, in fact, this tutorial is base on "Select" component made by geist-ui github.com/geist-org/react/blob/ma... currently used by Vercel.
Is not a simple component, I know you can use and HTML tag but is not common use it because is more complex to customize, you can see famous React libraries and they all use custom code to do it, for example, Material UIhttps://github.com/mui-org/material-ui/tree/next/packages/material-ui/src/Select
Is totally reusable in React, you can't use this code in another framework/library without adapt because of it's based on the React API such as useMemo, useCallback, etc...
And remember the main goal of this tutorial is to learn about the Compound Pattern in React so that you can use it in any component.