Question 409855 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to make a Select required in TSX file?

I want a Select component to be required in my app

required option is not accepted by Select component for some reason. As well as required={true}

Error message is:

Property 'required' does not exist on type 'IntrinsicAttributes & Omit<PublicBaseSelectProps<SelectOption, false, GroupBase<SelectOption>>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>

My design is

                                    <Select
                                        required={true}
                                        placeholder={"Select region"}
                                        value={props.selectedRegion}
                                        options={props.regionsOptions}
                                        className="width-285"
                                        onChange={props.onSelectRegionsOptions}
                                    />

Why is it impossible to make a Select component required it React? One other option I found online is to wrap the Select in FormControl and make the latter required, but this does not work for my validation, and also does not display required symbol and red text on the component.

This app was not made by me, I got it from another team member. There is no documentation. I just need to make one field required.

What is the solution to this problem?

Tags:

2

Answers


  1. 0

    It seems like the Select component doesn’t support required property as default. In this case, you can make a custom Select component inherited the original Select. I provide sample code for it.

    const CustomSelect = ({ required = false, wrapperClass, optionClass, onChange, value, options, selectedOption, placeholder}) => {
    const [isValid, setIsValid] = useState(true);

    useEffect(() => {
        setIsValid(!!selectedOption);
    }. [selectedOption]);

    <div className={wrapperClass}>
        <Select
            placeholder={placeholder}
            value={selectedOption}
            options={options}
            className={optionClass}
            onChange={onChange}
        />
        {!isValid && <p className='error-message'>This field is required</p>}
    </div>
}

    you can use the required property with the above CustomSelect component. Hope it helps you.

    Login or Signup to reply.
  2. 0

    In short: you can’t make a react-select <Select> required like you can with regular form elements.

    react-select‘s <Select> does not have a required prop, because it’s not a regular HTML form element (which is where required would have an effect on the validation of the owning form), and such a prop would have no effect.

    What should happen when there is no value for a react-select depends entirely on your particular app, and you’ll need to do that validation "by hand". For instance, you could set the aria-invalid prop on the field, and disable your form’s submit button.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search