I think your content is high level, you're providing useful information - at least to me, as a mid frontend developer. I haven't noticed how many subscribers you have or the views on the videos until now, but now when I've noticed it - you should have a lot more people following you in terms of content quality. There's quite a lot time making content, filming it, editing and being consinstent. Thanks for your time and I hope you'll read this and make your day a bit better. Cheers from Croatia!
Excellent video. No fluff, straight forward, clear, comprehensive, and to the point. Well done. I know many videos cover creating a select from scratch, but in the real-world, you often rely on libraries and don't have time to re-create the wheel when when there's excellent, industry-tested libraries like this. The problem is that sometimes these libraries are complex and their documentation is awful, or lacking! So this is fantastic! Libraries for surprisingly complex features like this are important. For this library though, I would consider adding an addendum video covering the "components" property, allowing users to replace specific components.
I'm really grateful to you, man, for this wonderful explanation. According to KibototV2, your content is of a very top quality, and you should be followed by a lot more people.
How to display the all options value in.field in Multi select . Before multi select i have one drop down based on that drop-down option i will generate the options of multi select value should be by default selected in the field
showing how to change the styles on focus would be a bonus2x, i'm crazy after how i can do it, the documentation it's just not that great. But your video helped me a lot, thank you
Hi sir, Thanks for this amazing video. React select has one issue: i can't make deadt selected option by value, they need value,label go make selected. its needed when you have only id from database. example: const countries = [ { value: "MG", label: "Madagascar", icon: MgIcon }, { value: "UE", label: "Union Européenne", icon: UeIcon }, { value: "BD", label: "Bangladesh", icon: UeIcon,sele:true} ]; ({ ...base, display: "flex", alignItems: "center" }) }} components={{ Option, MultiValue }} /> it should select UE, but its not working like this, they need { value: "UE", label: "Union Européenne", icon: UeIcon } this. DO you have any solutio? sir
Nice video man. One question though, how to disable their hover styles? Their documentation is really bad in my opinion...styling aspect was covered terribly. Besides "isSelected" and "isFocused" how am I supposed to know which other states are there?
Great Video! But I have a query related to creatableSelect, I need to show already selected options in inputfield of creatable select. I have set it in the options state, but i still see no options already selected in the inputField of creatable, can you help me out on this?
why is everyone using dummy data? what if i have 300 entries!! Could you please use an API? I would personally like to see how you implement the using an API say from rapidapi or another. Good tutorial meanwhile
Really great tutorial, my question is, can I use formik to handle validation, onChange and onSubmit with this component...have you worked on something like this before?
Hi Oleksander, I would like to ask you for example I have a mern project to create a movie DB and I have to choose from react-select only one genre for each movie and can't be repeated ???
Thanks to this video I was able to create the exact reusable drop down I wanted. Thank you so much. But now I can't seem to extract the selected value to use it in the parent component. Do you have an example of how to forward the ref to a reusable react-select component and the selected value back in the parent component ?
Hi, you set your state outside of react-select and in onChange function of it you update your state. So your state is not related to react-select at all and you can share it in any way.
Great, help! problem: how to align left the single value and placeholder like you, I did it same like you, but w my select placeholder and single value are in center.
Hallo, great video thanks,. hhmm, i have once question for CRUD process, how to set value the react-select after we load data from API. In case i use react-hook-form... can you give me a solution, i'm stuck here... many thanks...
Hi, you set a value in react-select and then in onChange you just update your state outside of the component. In this way it doesn't matter what you use outside of react-select
@@MonsterlessonsAcademy hi, the problem is when i not change react-select when data incoming from API then i submit data and state is always null.. except i change the react-select the state not empty...
Thanks for the video, but it did not help me. I am trying to make it so my select box does not increase in size as options are added and so that the height can be manipulated of the select box itself. Working with react-select is tough! Not a very good library imo.
Hello, do u know a way to show lets say 10 of 50 options on react-select and then it should be scrollable to see more options? I would love to get some help here :P
![เขามัทรี - เอ็กซ์ ศุภกฤต - จอนนี่มิวสิค [ Official MV ]](http://i.ytimg.com/vi/AS9ufKuQIVs/mqdefault.jpg)
WATCH NEXT: React Interview Questions and Answers - Dominate Your Next Interview - th-cam.com/video/yQHr4opz_N0/w-d-xo.htmlsi=51b2XP_84GH3q6oF
I think your content is high level, you're providing useful information - at least to me, as a mid frontend developer. I haven't noticed how many subscribers you have or the views on the videos until now, but now when I've noticed it - you should have a lot more people following you in terms of content quality.
There's quite a lot time making content, filming it, editing and being consinstent. Thanks for your time and I hope you'll read this and make your day a bit better. Cheers from Croatia!
I appreciate that!
Well said Kiboto
Excellent video. No fluff, straight forward, clear, comprehensive, and to the point. Well done.
I know many videos cover creating a select from scratch, but in the real-world, you often rely on libraries and don't have time to re-create the wheel when when there's excellent, industry-tested libraries like this. The problem is that sometimes these libraries are complex and their documentation is awful, or lacking!
So this is fantastic! Libraries for surprisingly complex features like this are important.
For this library though, I would consider adding an addendum video covering the "components" property, allowing users to replace specific components.
Thanks for the idea!
@@MonsterlessonsAcademy Sir i dont know why but when i click on option useState is not changing from true to false i dont know why
plz help me sir
15minutes of pure knowledge! Thank you so much
Glad it was helpful!
I'm really grateful to you, man, for this wonderful explanation.
According to KibototV2, your content is of a very top quality, and you should be followed by a lot more people.
Wow, thanks!
Great course with clear grammar explanations.
Glad it was helpful!
Oh my god i was searching a way how to create at dropdown for one week i am so so glad to meet you sir so thank you 🙇🙇
Happy to help!
Very clear and straight to the point. Thank you so much.
You are welcome!
Excellent video my friend.
Thanks for the visit
Bro, this is great! Thanks
Glad you like it!
Thank you, this was a great tutorial. Much appreciated.
Glad it was helpful!
I need input border or outline 0
Congrats !!!! High level tutorial
Glad you think so!
How do we reduce the box height and ceter the drop-down arrow after reducing height
How to display the all options value in.field in Multi select . Before multi select i have one drop down based on that drop-down option i will generate the options of multi select value should be by default selected in the field
showing how to change the styles on focus would be a bonus2x, i'm crazy after how i can do it, the documentation it's just not that great. But your video helped me a lot, thank you
Sorry I can't recommend anything as I didn't solve such problems in react-select
I have a solution, all you need to do is to target the component you want to style and then call the state.isFocused method
amazing
Glad you think so!
Hi sir, Thanks for this amazing video.
React select has one issue: i can't make deadt selected option by value, they need value,label go make selected. its needed when you have only id from database.
example:
const countries = [
{ value: "MG", label: "Madagascar", icon: MgIcon },
{ value: "UE", label: "Union Européenne", icon: UeIcon },
{ value: "BD", label: "Bangladesh", icon: UeIcon,sele:true}
];
({
...base,
display: "flex",
alignItems: "center"
})
}}
components={{
Option,
MultiValue
}}
/>
it should select UE, but its not working like this, they need { value: "UE", label: "Union Européenne", icon: UeIcon } this.
DO you have any solutio? sir
Greate Video!!!
How can i add buttons on top of options?
Thank you so much very helpful
You're welcome!
you the best
Thanks
Hello, how can i select value instead of object to post to API
Thank you
Nice video man. One question though, how to disable their hover styles? Their documentation is really bad in my opinion...styling aspect was covered terribly. Besides "isSelected" and "isFocused" how am I supposed to know which other states are there?
Hi I didn't disable their hover style so I can't help there.
Great Video! But I have a query related to creatableSelect, I need to show already selected options in inputfield of creatable select. I have set it in the options state, but i still see no options already selected in the inputField of creatable, can you help me out on this?
why is everyone using dummy data? what if i have 300 entries!! Could you please use an API? I would personally like to see how you implement the using an API say from rapidapi or another.
Good tutorial meanwhile
If you have 300+ entries then you need a search inside a select. I showed it in the video.
Really great tutorial, my question is, can I use formik to handle validation, onChange and onSubmit with this component...have you worked on something like this before?
Hi, it is completely possible. You just provide a custom component in formik Field which gets options, field, form and you return react-select there.
Is there a way to manually update the value of a react-select ? without adding a value field?
Hi Oleksander, I would like to ask you for example I have a mern project to create a movie DB and I have to choose from react-select only one genre for each movie and can't be repeated ???
Thanks to this video I was able to create the exact reusable drop down I wanted. Thank you so much. But now I can't seem to extract the selected value to use it in the parent component. Do you have an example of how to forward the ref to a reusable react-select component and the selected value back in the parent component ?
Hi, you set your state outside of react-select and in onChange function of it you update your state. So your state is not related to react-select at all and you can share it in any way.
Thanks man
You're welcome!
Great,
help!
problem: how to align left the single value and placeholder like you, I did it same like you, but w my select placeholder and single value are in center.
Hi, no idea but you can take the source code in the description to get the same result.
@@MonsterlessonsAcademy
thanks you,
I got the solution
Hi what IDE are you using? looking nice, can you please share how to setup?
Hi, I already covered that
th-cam.com/video/j6uqOvTRq6I/w-d-xo.html
th-cam.com/video/YrLiugDhCuk/w-d-xo.html
th-cam.com/video/Xa4aOOB7XZo/w-d-xo.html
Thank you, your content is high level, but I have a question for you. How can I change the text inside the package? e.g. "Select..." "Select All".
There is a placeholder property in props
react-select.com/props
Hello Guys! Can you show me how to use React-select with Search Button ?
Hallo, great video thanks,. hhmm, i have once question for CRUD process, how to set value the react-select after we load data from API. In case i use react-hook-form...
can you give me a solution, i'm stuck here...
many thanks...
Hi, you set a value in react-select and then in onChange you just update your state outside of the component. In this way it doesn't matter what you use outside of react-select
@@MonsterlessonsAcademy hi, the problem is when i not change react-select when data incoming from API then i submit data and state is always null.. except i change the react-select the state not empty...
Thank you, this was very helpful! I was also looking for a way to customize the arrow in the react select drop down. Do you know if it is possible?
Hi I didn't try that. You need to check documentation.
@@MonsterlessonsAcademy Thank you for the response.
@@nikolaganev6216 Hey, did you find which part of the documentation actually refers to this? It's quite the mess. I want to remove the arrow entirely.
What if i have a paginated api and i want to load page 2 as i scroll down?
Thanks for the video, but it did not help me. I am trying to make it so my select box does not increase in size as options are added and so that the height can be manipulated of the select box itself. Working with react-select is tough! Not a very good library imo.
I don't know any library which is better. If you need it super customizable then you can just build it yourself.
hi please make a video on dependent dropdown using fetch api data and react hook.
Thank you for the idea
Thanks a lot :-)
You're welcome!
i cant reset display select when i reset state. but reset just as I wanted. please everyone help me
Hello, do u know a way to show lets say 10 of 50 options on react-select and then it should be scrollable to see more options? I would love to get some help here :P
Here is infinite loader implementation
stackblitz.com/edit/react-select-infinite-scroll?file=index.tsx
Thanks, bro how to remove __isNew__:true object?
You can just take properties that you need or directly delete __isNew__
how to include image in the label
What is the theme you use for vs code?
It's gruvbox theme and vim editor
@@MonsterlessonsAcademy tks
excelent to sleep tonight
Thank you!
Fake video
Акцент крутой
Thanks
How to create chart(bar/line) graph, after selecting values from Drop-down from api?