React Select 2 custom error messages

React Select is a flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support. React Select is funded by Thinkmill and Atlassian. It represents a whole new approach to developing powerful React.js components that just work out of the box while being extremely customizable.

So recently I was using react select in one of my projects but stumbled upon an issue of properly displaying error messages next to the select and the library doesn’t support it yet.

I tried searching for the issue numerous times but no help, after some time when it started to frustrate me I decided to write a wrapper upon it.

Let's have a look at the wrapper —

There are a few things that are important regarding our current use case —

1. Line number 15 errorMsg as props.
2. Line number 34 to 56 which are the CSS property for the error msgs.
3. Line number 30 which is for internationalization from https://react.i18next.com/ I won’t be covering this plugin in this blog, but for the understanding, this is helpful to use internationalization in a react app.
4. Line number 86 to 88 shows the error msg populated by the error message.
5. Line number 59 to 61 places the error class on the label of the select component.
6. This is just a way I tried using the customization while using react select.

There can be many better ways. If you do find them please notify us in the comments. Happy to learn.