Im using Material-ui select @material-ui/core/Select
with redux-form as a HOC. I have created the form and select box appears but the options are not showing.
here is my component
import React from "react";
import { Field, reduxForm } from "redux-form";
import SelectField from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
const renderSelectField = ({
input,
label,
meta: { touched, error },
children,
...custom
}) => (
<SelectField
floatingLabelText={label}
errorText={touched && error}
{...input}
onChange={(event, index, value) => input.onChange(value)}
children={children}
{...custom}
/>
);
const Form = props => {
const { handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<div>
<Field
name="favoriteColor"
component={renderSelectField}
label="Favorite Color"
>
<MenuItem value="1" primaryText="value 1" />
<MenuItem value="2" primaryText="value 2" />
<MenuItem value="3" primaryText="value 3" />
</Field>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>
Submit
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
);
};
export default reduxForm({
form: "form"
})(Form);
It appears as below when clicked the combobox options as here
And I have created a codesandbox instance https://codesandbox.io/s/l2pqoryvvl?fontsize=14
Simply change the MenuItems to
<MenuItem value="1">value 1</MenuItem>
<MenuItem value="2">value 2</MenuItem>
<MenuItem value="3">value 3</MenuItem>
menu item does not take a primary text as a prop.