React: The `value` prop supplied to <select> must be a scalar value if `multiple` is false

Question

I am getting this warning:

Warning: The `value` prop supplied to <select> must be a scalar value if `multiple` is false. Check the render method of `Control`.

I am using the React Redux Form https://davidkpiano.github.io/react-redux-form/docs/api/Control.html#prop-defaultValue.

The data is coming in as an array of objects to display inside of the select options element. I don't want to turn the control into a multiple since we only want the user to select one value.

How would I go about solving this warning?

Answer 1

if you use an array in your state it will get that error if you are not doing multiple searches

if it is a simple search use single quotes ''

in useState('')

const [categoria, setCategoria] = useState('')

<select
        onChange={e => setCategoria(e.target.value)}
        value={categoria}
       >
</select>

Answer 2

If you specify

multiple={false}

Then whatever you provide on the select as a value must be a single value, like "apple".

However, if you specify

multiple={true}

react expects an array:

value={['apple','orange']}

See the example of a select with multiple={true} in the official documentation for React Forms.

Bear in mind that react will only add the multiple keyword to the rendered html if you set it to true. So your control can have a multiple property set to false and not create a rendered element with multi-select.

Answer 3

I was getting this error even after value was array, was able to solve by following

value={value || []}