This is in react with material ui, building a select field with a TextField and a ManuItem component.
my code:
{data.category?.map((category) => (
<MenuItem
key={category.id}
value={{
id: category.id,
percentage: category.percentage,
}}
>
{category.name}
</MenuItem>
but is giving me this console warning:
Material-UI: You have provided an out-of-range value [object Object] for the select...
any idea?
This is because TextField accepts only one of the values from the list. In this case, list items are objects and not strings so they don't match and hence the warning.
Here's a working codesandbox with the second approach (using objects as values)
You can either change the value of the items to strings and set the value of TextField as one of the string values.
<MenuItem
key={d.id}
value={d.name}
>
Or you must stringify the json objects as an HTML attribute cannot hold a JSON Object. So, it tries to generate a valid string by using toString() method on object that generates '[object Object]' as its value. Therefore, if you stringify the object, your list item will have a stringified value of the entire object (please note if the object is very large this may not be the optimal approach).
<MenuItem
key={d.id}
value={JSON.stringify({
id: d.id,
percentage: d.percentage,
name: d.name
})}
>
And add value prop to TextField
<TextField
id="outlined-select"
select
required
label="Select"
variant="outlined"
onChange={handleChange}
helperText="Please select a value"
InputLabelProps={{
shrink: true
}}
value={selectState || ""} // THIS IS NEEDED
defaultValue={""}
>
Related
<Autocomplete
id="recordlist"
freeSolo
options={[""]}
renderInput={(params) => (
<TextField
sx={{ width: 300 }}
onChange={this.handleChange}
{...params}
label="record"
/>
)}
/>
When using the above code Autocomplete add an empty list unneeded box as shown in the picture below:
how do I remove this empty box when the options list is empty? the options list get filled later when options are received from the server. but initially I want not to have any options and remove this strange empty option box.
You're still giving an option "". Replace it with an empty array options={[]}
I have the following Control written for ReactJs app. The app and the code is not written by me, but I have to modify it. However, I am new to ReactJs.
function FormSelectNative({ name, label = null, defaultValue = '', options, valueKey = 'value', labelKey = 'label', ...props }) {
return (
<FormControl variant="outlined" size="small" fullWidth>
<InputLabel id={name}>
{label || name}
</InputLabel>
<Select
name={name}
labelId={name}
label={label || name}
defaultValue={defaultValue}
{...props}
>
{options.map(option =>
<MenuItem key={option[valueKey]} value={option[valueKey]}>{option[labelKey]}</MenuItem>
)}
</Select>
</FormControl>
);
}
I need to pass defaultValue parameter correctly.
I am trying to set it like this:
<FormSelectNative
options={games}
valueKey="id"
labelKey="name"
onChange={handleGameSelect}
defaultValue={games[0]}
/>
But it doesn't work (default value is not set). I need to set default value to be first element of "games". However, here I believe is some mismatch of types, so it is not set.
Games element example:
{id: 1, name: "Name of Game", description: "Some test description", helper: "test.png", created_at: "2021-08-24T16:06:13", ... some other properties}
The defaultValue has to be one of the possible value that you pass to the MenuItem. Each of those values is the game.id of each game, not the game object as a whole (a number, not an object). That's because you are doing value={option[valueKey]} where valueKey is id.
Therefore this is what you should do instead to set the default value correctly:
<FormSelectNative
options={games}
valueKey="id"
labelKey="name"
onChange={handleGameSelect}
defaultValue={games[0].id} // <<<--- get the id of the first item
/>
I am creating form using formik and I want age list 1 to 100 in dropdown i am showed but one submit value are not working
codesandox:
https://nmsje.csb.app/
Just change the following code from
<MenuItem key={item} value={item.value}>
{item}
</MenuItem>;
To:
<MenuItem key={item} value={item}>
{item}
</MenuItem>;
Items are just plain numbers not object, so there is no value property in them. I'm not sure why it's not throwing an error though.
<FormControl
size="small"
variant="outlined"
style={{ width: '100%' }}
>
<InputLabel>Type</InputLabel>
<Select
label="type"
value={'' || selectValue}
onChange={handleChange}
>
{type?.getCode?.map(option => (
<MenuItem key={option.COM_CD} value={option.COM_CD}>
{option.COM_CD_NM}
</MenuItem>
))
)}
</Select>
</FormControl>
This is the error. (You have provided an out-of-range value undefined for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are U001, U002. )
In my opinion, unfinished occurred while loading while receiving data called type, which is causing an error. In this case, what should we do? Can I ignore it because it's a warning, not an error?
2 parts to my suggestion.
The syntax for the value has a boolean operation. Create a variable or other state to hold the value you want to apply.
Also remember that the first time through the render "selectValue" will be undefined.
I have the following Select from Material UI:
<FormControl className='select-form'>
<InputLabel id="demo-simple-select-outlined-label">Choose User</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={this.state.userId}
onChange={this.handleChange}
label="choose-user"
>
{Object.keys(users).map(uId => (
<div key={uId}className='select-menu'>
<img
src={''}
alt={`Avatar of me`}
className='signin-avatar'
/>
<MenuItem value={30}>{users[uId].name}</MenuItem>
</div>
))}
<MenuItem value={20}>Hello</MenuItem>
</Select>
</FormControl>
My handleChange method gets the value of the MenuItem below with the value of 20 when selected. I just used that as a test and the Select and the onChange work just fine.
The problem is the div, that get dynamically rendered from the users object. I want to render an avatar and the name of the user in every MenuItem. I have to pack them in a div, because the .map() needs to have one parent item.
I want to pass the value (the user id) of the selected MenuItem to the handleChange method, but all I get is an undefined when a user select is clicked.
How can I pass the value of the select to the onChange method, when the Select items are packed inside a div?
The correct way is to put your image inside the MenuItem, and you will get the value
{
Object.keys(users).map((uId) => (
<MenuItem value={uId}>
<img src={''} alt={`Avatar of me`} className="signin-avatar" />
{users[uId].name}
</MenuItem>
));
}