CODEWITHSUNDEEP
javascriptreactjsreact-redux-form
Kevin
Kevin

Reputation: 389

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

I am getting this warning:

Warning: The value prop supplied to 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?

Upvotes: 20

Views: 37912

Answers (4)

Atharv
Atharv

Reputation: 1

So basically, whenever you change the state of an element in react, and if you have initialised the state to be an empty array and then change the state to be a single value/string , it will give this error. If you want the user to select only one value, then you can initiase the state to be an empty string.

Upvotes: 0

Akshay Pagare
Akshay Pagare

Reputation: 154

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

value={value || []}

Upvotes: 2

ztvmark
ztvmark

Reputation: 1434

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>

Upvotes: 13

J E Carter II
J E Carter II

Reputation: 1496

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.

Upvotes: 14

Related Questions