How to pass boolean into Material UI MenuItem value in react ts?

Question

I am new to react and am having some trouble passing a simple boolean value as a prop for the MenuItem in the material UI library. I don't think the solution is too complicated. Can someone let me know how I can resolve this error?

The Line that this error is point to is shown below:

<MenuItem value={true}>Yes</MenuItem>

The error looks like this:

  The last overload gave the following error.
TS2769: No overload matches this call.
    Type 'true' is not assignable to type 'string | number | readonly string[] | undefined'.
    402 |                                 onChange={handlePO_status}
    403 |                             >
  > 404 |                                 <MenuItem let value={true}>Yes</MenuItem>
        |                                               ^^^^^
    405 |                                 <MenuItem value={false}>No</MenuItem>
    406 |                             </Select>
    407 |                         </FormControl>

Any help would be greatly appreciated. Thank you!

Supernatural

Why don't you just pass it as string e.g. value="true" then you can just check value === 'true'. – Trotter

Answer 1

This works for me and it actually preserves the boolean type in the underlying form state as well (in Material-UI v5).

<MenuItem value={true as any}>True</MenuItem>
<MenuItem value={false as any}>False</MenuItem>

Bangs

Answer 2

As stated in the error - the type value expects is string | number | readonly string[] | undefined. As such, you cannot pass a boolean into the value property.

It's hard to tell what you're trying to accomplish from your code snippet, but you may need to reconsider the structure of your code. For example,

<MenuItem onClick={() => handlePO_status(true)}>Yes</MenuItem>
<MenuItem onClick={() => handlePO_status(false)}>No</MenuItem>

Cirillo

Answer 3

I faced the same error trying to get working something like this:

const [someValue, setSomeValue] = useState<boolean>()
const menuItems = [{id:"0", label: "YES", value: true},{id:"1", label: "NO", value: false}]
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSomeValue(e.target.value)
}
...
<TextField
select
value={someValue}
onChange={handleChange}>
{menuItems.map((item) => (
<MenuItem key={item.id} value={item.value}>{item.label}</MenuItem>
))}
</TextField>

The problem is the line value={item.value} because MUI MenuItem does not accept boolean value, only string or number. I found the following solution - I used the type string intead of boolean in menu definition const and had to adjust handleChange to return not a string but boolean. Then someValue datatype is not affected, is still boolean and desired functionality is working. This worked for me at least. So the working code looks like this:

const [someValue, setSomeValue] = useState<boolean>()
const menuItems = [{id:"0", label: "YES", value: "true"},{id:"1", label: "NO", value: "false"}]
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSomeValue(e.target.value === "true" ? true : false)
}
...
<TextField
select
value={someValue}
onChange={handleChange}>
{menuItems.map((item) => (
<MenuItem key={item.id} value={item.value}>{item.label}</MenuItem>
))}
</TextField>

Sepulveda

I don't think this is perfect because the currently selected item won't be rendered as such (true is not "true") – Ironware