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
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 ???
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?
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
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?
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.
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.
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?
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...
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
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
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
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.
WATCH NEXT: React Interview Questions and Answers - Dominate Your Next Interview - ua-cam.com/video/yQHr4opz_N0/v-deo.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!
I need input border or outline 0
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!
Bro, this is great! Thanks
Glad you like it!
Excellent video my friend.
Thanks for the visit
Thank you, this was a great tutorial. Much appreciated.
Glad it was helpful!
Thank you so much very helpful
You're welcome!
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
Greate Video!!!
How can i add buttons on top of options?
amazing
Glad you think so!
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 ???
you the best
Thanks
Thanks man
You're welcome!
Hi what IDE are you using? looking nice, can you please share how to setup?
Hi, I already covered that
ua-cam.com/video/j6uqOvTRq6I/v-deo.html
ua-cam.com/video/YrLiugDhCuk/v-deo.html
ua-cam.com/video/Xa4aOOB7XZo/v-deo.html
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.
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
Hello, how can i select value instead of object to post to API
Thank you
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?
Is there a way to manually update the value of a react-select ? without adding a value field?
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 please make a video on dependent dropdown using fetch api data and react hook.
Thank you for the idea
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.
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.
What if i have a paginated api and i want to load page 2 as i scroll down?
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.
Hello Guys! Can you show me how to use React-select with Search Button ?
Thanks a lot :-)
You're welcome!
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...
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
i cant reset display select when i reset state. but reset just as I wanted. please everyone help me
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
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
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.
how to include image in the label
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.
Thanks, bro how to remove __isNew__:true object?
You can just take properties that you need or directly delete __isNew__
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?