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.
Related
I have a TextField in Material UI used as Select. The MenuItems are working fine in the form, but I'm not being able to pre select an option based on data on a state previously populated
I have this , and as example I want to preselect "Familia 3" , What I'm supposed to set up?
<Textfield id="family" select value=0 defaultValue=3 >
<MenuItem value="0">Seleccionar</MenuItem>
<MenuItem value="1">Familia 1</MenuItem>
<MenuItem value="2">Familia 2</MenuItem>
<MenuItem value="3">Familia 3</MenuItem>
</TextField>
I tried changing Value, DefaultValue , removing one of them, and couldt find a solution
AI bet is very simple but I cant find any solution to show up with option "Familia 3" preselected
Can you help me with this?
Thanks !
Default value is not applicable in the select TextField
set your initial value as the value prop.
You have misspelling in the Textfield opening tag it should be TextField
when assigning a non string value to an attribute always use curly brackets ie: value={3}
<TextField id="family" select value={3}>
<MenuItem value="0">Seleccionar</MenuItem>
<MenuItem value="1">Familia 1</MenuItem>
<MenuItem value="2">Familia 2</MenuItem>
<MenuItem value="3">Familia 3</MenuItem>
</TextField>
You can store Familia 3 into the state and than set the value of text field to state
const [initial value, setinitialvalue ] = use state("Familia
3")
<Textfield id="family" select value={initialValue}
onChange={(e) => setinitialvalue(e.target.value) }
defaultValue=3 >
<MenuItem value="Seleccionar
">Seleccionar</MenuItem>
<MenuItem value="Familia 1">Familia 1</MenuItem>
<MenuItem value="Familia 2 ">Familia 2</MenuItem>
<MenuItem value="Familia 3">Familia 3</MenuItem>
</TextField>
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={""}
>
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>
));
}
I'm trying to create a select (dropdown) using Material-UI within a redux-form. There's an example for using M-UI's selects within a redux form on their website.
I'd like to do the same type of example except using Material UI's MenuItem's instead of the option tags used in the example.
It seems as though simply replacing the options with MenuItems does not work, and the MenuItems do not appear under the children for the select field. I have gotten this to work with options:
Here is the renderSelectField used to create the select component. This is working:
renderSelectField = ({ input, label, meta: { touched, error }, children, ...custom }) => (
<FormControl className={this.props.classes.formControl} error={touched && error}>
<InputLabel>{label}</InputLabel>
<Select
native
{...input}
{...custom}
>
{children}
</Select>
{this.renderFormHelper({ touched, error })}
</FormControl>
)
And here is the render:
render() {
return (
<div>
<form onSubmit={this.props.handleSubmit(this.props.submitForm)}>
<Field name={"sheetType"} component={this.renderSelectField} label={"Sheet Type"}>
<MenuItem value={"basic"} primaryText={"Basic"}>Basic</MenuItem>
<MenuItem value={"advanced"} primaryText={"Advanced"}>Advanced</MenuItem>
</Field>
<Button onClick={this.props.onCancel}>Cancel</Button>
<Button type="submit" color={"secondary"}>Next</Button>
</form>
</div>
)
}
I expect there to be two dropdown menu items passed in as the children of MenuItem, but i believe there needs to be some property passed into MenuItem itself.
Replacing menu item with option tags work.
You are mixing between simple Select and native Select. If you going to use native change <MenuItem> to <option> otherwise just remove native property.
Native pattern:
<Select native>
<option value="item">item</option>
</Select>
Simple Select pattern:
<Select>
<MenuItem value="item">item</MenuItem>
</Select>
I am using redux form with material ui. I have an array of form templates that are available to select as options. What I am trying to achieve is to get the selected template back, dispatch an action and then initialize redux form with selected template values. I am unable to call the method on SelectItem component (nothing gets logged to the console). I went through the similar problems and solutions but nothing seemed to work in my case. My code goes like this:
setTemplate = (option) => {
console.log(option);}
{formTemplates && (
<Row>
<StyledFormControl>
<Field name="templates" label="Available templates:" component={SelectField}>
<MenuItem value="" disabled>
Choose template:
</MenuItem>
{formTemplates.map(option => {
return (
<MenuItem value={option._id} onClick={this.setTemplate.bind(this, option)} key={option._id}>
{option._id}
</MenuItem>
);
})}
</Field>
</StyledFormControl>
</Row>
)}
Do you have any idea why this should not work? Thanks
try
onClick={() => this.setTemplate(option).bind(this)}