Breaking News: Grepper is joining You.com. Read the official announcement!

controlled select material ui

Himanshu Makwana answered on March 15, 2022 Popularity 8/10 Helpfulness 4/10

answer controlled select material ui

controlled select material ui

Comment

const SelectComponent = ({defaultValue, name, label, errors, control, require, menuList, extraOption}) => {
  return (
    <Controller
        defaultValue={defaultValue}
        name={name}
        control={control}
        rules={{required: Boolean(require) ? true : false}}
        render={({onChange, value, name}) => (
        <Select
            labelId="demo-simple-select-label23"
            id="demo-simple-select23"
            value={value}
            name={name}
            label={label}
            error={(errors[name] ? true : false)}
            onChange={ e => {onChange(e.target.value); }}
        >
            {
                menuList.map((ele, index) => (
                    <MenuItem key={index} value={ele.id}>{`${ele.name}${extraOption ? "," + ele[extraOption] : ""}`}</MenuItem>
                ))
            }
        </Select>)}
    />
  )
}

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript material-ui select

Link to this answer
Share Copy Link

Contributed on Mar 15 2022

Himanshu Makwana

0 Answers Avg Quality 2/10

controlled select material ui

Contents

More Related Answers

controlled select material ui

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.