const currencies = [
{
value: "USD",
label: "$",
name: "Dollar"
},
{
value: "EUR",
label: "€",
name: "Euro"
}
];
export default function MultilineTextFields() {
const [currency, setCurrency] = React.useState({
label: "€",
value: "EUR",
name: "Euro"
});
const handleChange = event => {
setCurrency(event.target.value);
};
return (
<form noValidate autoComplete="off">
{console.log(currency)}
<div>
<TextField
select
value={currency}
onChange={handleChange}
>
{currencies.map(option => (
<MenuItem key={option.value} value={option}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
</form>
);
}
I can't set Object value in Select. If <MenuItem key={option.value} value={option.value}> not problem, But I need some value in Object for output. I must value={option} for print {currency.name} in some fields.
Provide a defaultValue prop for the wrapping "select" element/component, and specify a non-object value to the "option".
<TextField
id="standard-select-currency"
select
label="Select"
value={currency}
onChange={handleChange}
helperText="Please select your currency"
defaultValue="EUR"
>
{currencies.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
Related
I'm working on material ui react storybook . I have given customised select options but when i select options it is not selecting. Below is what i have tried if option 1 is selected it not taking any value. How do i select options ? I cannot use TextField , because i'm working on select component. I have to achieve this with the Mapping. Thanks. Below is My code.
export const SelectBasic= ({
props,
selectoptions,
}) => {
const theme = useTheme();
const [age, setAge] = React.useState('');
const handleChange = (event: SelectChangeEvent) => {
setAge(event.target.valueasstring);
};
return (
<div>
<FormControl fullWidth >
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
{selectoptions.map(item => {
return (
<MenuItem value={item.label}>{item.label}</MenuItem>
)
})}
</Select>
</FormControl>
</div >
);
}
stories.js
export const Selectdef = SelectBasic.bind({});
Selectdef .args = {
selectoptions: [{ "label": "Option 1" }, { "label": "Option 2" }, { "label": "Option 3" }],
};
const {
Box,
FormControl,
InputLabel,
MenuItem,
Select,
Typography
} = MaterialUI;
const OPTIONS = [{
value: 10,
label: 'ten'
},
{
value: 20,
label: 'twenty'
},
{
value: 30,
label: 'thirty'
}
];
const BasicSelect = ({options}) => {
const [age, setAge] = React.useState('');
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<Box sx={{ minWidth: 120 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
{options.map(item => <MenuItem value={item.value}>{item.label}</MenuItem>)}
</Select>
</FormControl>
<Typography>{`Currently selecting: ${age || 'undefined'}`}</Typography>
</Box>
);
}
ReactDOM.render( <BasicSelect options={OPTIONS} / > ,
document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#mui/material#latest/umd/material-ui.production.min.js"></script>
In your onChange function where you set state.
const handleChange = (event: SelectChangeEvent) => {
setAge(event.target.valueasstring);
};
`event.target.value` should be sent to `setAge`.
There are some code style issues but this is what breaks the option selection.
Your map placement is incorrect and you are missing to set a value for the MenuItem
Try this:
return (
<div>
<FormControl fullWidth >
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
{selectoptions.map((item) => {
return(
<MenuItem value={item.label}>{item.label}</MenuItem>
)
})}
</Select>
</FormControl>
</div >
);
I am learning react and it's fun!
I am creating a sign up form in React using react-select.
I am mapping values from array:
const options = [ 'female', 'male', 'other']
<Select {...register("gender")}
label="Gender"
fullWidth
variant="outlined"
>
{options.map(value => (
<option key={value} value={value}>
{value}
</option>
))}
</Select>
But I get following warning:
Warning: Use the defaultValue or value props on instead of setting selected on .
Questions:
How do I use the defaultValue or value props on ?
I am setting label="Gender" but it is not visible, why?
const options = [
{ value: "female", label: "Female" },
{ value: "male", label: "Male" },
{ value: "other", label: "Other" }
];
export default function App() {
const [gender, setGender] = useState("");
const handleChange = (event) => {
setGender(event.target.value);
};
return (
<div className="App">
<Select
value={gender}
onChange={handleChange}
>
{options.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</Select>
</div>
);
}
API reference: https://material-ui.com/api/select/
Working demo: https://codesandbox.io/s/pedantic-jones-dyfwd?file=/src/App.js:119-788
My objective is to show helperText in red color as we show in error time. But i couldn't make it.
Couldn't able to figure it out where i'm going wrong.
Here is the code:
class Sample extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
channel: -1,
sports: -1,
movie: ""
};
}
handleChange = (e: any) => {
this.setState({ channel: e.target.value });
};
handleSports = (e: any) => {
this.setState({ sports: e.target.value });
};
handleMovie = (e: any) => {
this.setState({ movie: e.target.value });
};
Valid = () => {
const errors = { channel: "", sports: "", movie: "" };
if (!this.state.channel) {
errors.channel = "Please select channel";
}
if (!this.state.sports) {
errors.sports = "select Sports";
}
if (!this.state.movie) {
errors.movie = "select movie";
}
return {
errors,
isSubmit: Object.keys(errors).length === 0
};
};
handleSubmit = (e: any) => {
e.preventDefault();
const data = {
channel: this.state.channel,
sports: this.state.sports,
movie: this.state.movie
};
console.log(data);
};
render() {
const { errors, isSubmit } = this.Valid();
return (
<>
<FormControl>
<Select
defaultValue={-1}
onChange={this.handleChange}
displayEmpty
inputProps={{ "aria-label": "Without label" }}
>
<MenuItem value={-1}>Select Channel</MenuItem>
<MenuItem value={10}>Sports</MenuItem>
<MenuItem value={20}>Entertainment</MenuItem>
</Select>
{!this.state.channel ? (
<FormHelperText>{errors.channel}</FormHelperText>
) : null}
</FormControl>
{this.state.channel === 10 ? (
<div>
<FormControl>
<Select
defaultValue={-1}
onChange={this.handleSports}
displayEmpty
inputProps={{ "aria-label": "Without label" }}
>
<MenuItem value={-1}>Select </MenuItem>
<MenuItem value={10}>Star sports 1</MenuItem>
<MenuItem value={20}>Star sports 2</MenuItem>
</Select>
{!this.state.sports ? (
<FormHelperText>{errors.sports}</FormHelperText>
) : null}
</FormControl>
</div>
) : this.state.channel === 20 ? (
<div>
<FormControl>
<Select
defaultValue={-1}
onChange={this.handleMovie}
displayEmpty
inputProps={{ "aria-label": "Without label" }}
>
<MenuItem value={-1}>Select</MenuItem>
<MenuItem value={10}>Star Movies</MenuItem>
<MenuItem value={20}>ABC</MenuItem>
</Select>
{!this.state.movie ? (
<FormHelperText>{errors.movie}</FormHelperText>
) : null}
</FormControl>
</div>
) : null}
<div>
<Button disabled={isSubmit} onClick={this.handleSubmit}>
Submit
</Button>
</div>
</>
);
}
}
export default Sample;
Here is the working sample
I don't know why it is not appearing in red color. Struggling a lot with this issue.
Can anyone please help me in this query?
pass error prop like this:
<FormControl error={!this.state.channel}>
<Select
defaultValue={-1}
onChange={this.handleChange}
displayEmpty
inputProps={{ "aria-label": "Without label" }}
>
<MenuItem value={-1}>Select Channel</MenuItem>
<MenuItem value={10}>Sports</MenuItem>
<MenuItem value={20}>Entertainment</MenuItem>
</Select>
{!this.state.channel ? (
<FormHelperText>{errors.channel}</FormHelperText>
) : null}
</FormControl>
or just like this
<FormHelperText error>{errors.channel}</FormHelperText>
here is the document: https://material-ui.com/api/form-helper-text/
I tried to map an array so that I will not code a 200 codes in one particular select. This is my code.
const location = [ {id: 'A'}, ...... up to 200 id: values]
<FormControl fullWidth={true}>
<Field name='location'
component={renderSelectField}
option={location.map((location, index) => (<option value={location.id}>{location.id}</option>))}
props={{size: 'small',
type: 'text',
variant: 'outlined'
}}
/>
</FormControl>
const renderSelectField = ({input, label, meta: {touched, error}, children}) => (
<Select
floatinglabeltext={label}
errortext={touched && error ? 1 : 0}
{...input}
onChange={(value) => input.onChange(value)}
children={children}/>
);
instead of coding these:
{/* <option/>*/}
{/* <option value='A'>A</option>*/}
{/* <option value='B'>B</option>*/}
..... up to 200
I tried also put a return in it but does not work.
You have to map it using MenuItem instead of Option in Field element
{Location.map((location, index) => (
<MenuItem key={index} value={location.id}>
{location.id}
</MenuItem>
))}
I am trying to create a multi-select form control, however, whenever I select something it does not get rendered. The function handleChange does get the event.target.value but it does not seem to add to the roleIds state. Furthermore, the console.log for the variable selected does not log anything to console.
Component Code:
const allRoleIds = [
"12345678",
"98765423",
"56465735683578",
];
const [roleIds, setRoleIds] = React.useState([]);
function handleChange(event) {
setRoleIds(event.target.value);
}
const [cassowaries, setCassowaries] = React.useState({
columns: [
{ title: "Cassowary Name", field: "name" },
{
title: "Cassowary Roles",
field: "roles",
render: (rowData) => {
return (
<li>
{rowData.roles.map((role) => (
<Chip label={role} className={classes.chip} />
))}
</li>
);
},
editComponent: (props) => (
<FormControl className={classes.formControl}>
<InputLabel>Roles</InputLabel>
<Select
multiple
value={roleIds}
onChange={handleChange}
input={<Input id="select-multiple-chip" />}
renderValue={(selected) => {
console.log(selected);
return (
<div className={classes.chips}>
{selected.map((value) => (
<Chip
key={value}
label={value}
className={classes.chip}
/>
))}
</div>
);
}}
// MenuProps={MenuProps}
>
{allRoleIds.map((id) => (
<MenuItem key={id} value={id}>
{id}
</MenuItem>
))}
</Select>
</FormControl>
),
},
{ title: "Penguin", field: "penguin" },
],
data: [{ name: "Mehmet", roles: roleIds, penguin: true }],
});
You are doing concat in your handleChange. Material ui already gives you the array of selected values to you. Sp fix your handleChange everything should be fine.
Like this
function handleChange(event) {
setRoleIds(event.target.value);
}
Working demo is here
EDIT:
Based on additional req (see comments):
If a custom multi select component needs to be used inside materail table editcomponent, then the state of select should not be managed outside but state & onChagne needs to managed inside editComponent using the prop it provides.
See working demo here
Code snippet - material ui table
...
columns: [
{ title: "Tag Name", field: "name" },
{
title: "Tag Roles",
field: "roles",
render: rowData => {
return (
<li>
{rowData.roles.map(role => (
<Chip label={role} className={classes.chip} />
))}
</li>
);
},
editComponent: props => {
console.log("props", props);
return (
<FormControl className={classes.formControl}>
<InputLabel>Roles</InputLabel>
<Select
multiple
value={props.value}
onChange={e => props.onChange(e.target.value)}
input={<Input id="select-multiple-chip" />}
renderValue={renderChip}
>
{allRoleIds.map(id => (
<MenuItem key={id} value={id}>
{id}
</MenuItem>
))}
</Select>
</FormControl>
);
}
},
{ title: "Penguin", field: "penguin" }
],
data: [{ name: "Mehmet", roles: [], penguin: true }]
...