Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 <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?

like image 904
Kevin Avatar asked Dec 08 '17 20:12

Kevin


People also ask

How do I change the default value in Reactselect?

You can use an attribute defaultValue to set the default value in the Select menu If none option is integrated with this attribute first option is selected by default. You can create an Array of the object where you will store all options to be displayed and any single object is passed in the defaultValue attribute.

How do I use defaultValue?

Set a default valueIn the Navigation Pane, right-click the form that you want to change, and then click Design View. Right-click the control that you want to change, and then click Properties or press F4. Click the All tab in the property sheet, locate the Default Value property, and then enter your default value.

How do you use react select?

Basic usage of react-selectjs import React from 'react'; import Select from 'react-select'; ... With those two packages imported, we will be able to have access to the react-select ( <Select />) and also extend the React. Component class. In traditional HTML, the <select> tag houses multiple options and values.


1 Answers

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>
like image 53
ztvmark Avatar answered Sep 20 '22 18:09

ztvmark