Xeen
Xeen

Reputation: 7003

How to use <select><option value={true}> in React?

I have the following code:

<option value={false}>{getIntl('modals.users.suspended.unlocked')}</option>
<option value={true}>{getIntl('modals.users.suspended.locked')}</option>

but this returns the following error:

Type 'boolean' is not assignable to type 'string | number | string[] | undefined'.

I'm using TypeScript and in the Interface the value for this element is set to have a boolean data type. Is there a way to use true/false in select dropdown?

Upvotes: 5

Views: 10679

Answers (3)

manimk
manimk

Reputation: 54

The select option value must be a string or number, If you want to insert a boolean value you may use string-wise "true"/ "false" else you may use number type 1 for true and 2 for false.

Don't use 0 for false because it' selects the option but doesn't appear in the input Box.

Alternatively, you can use 1 for true and 2 for false.

For Example

let Priority = [
  {value:1, label: "True"},
  {value:2, label: "False"}
] 

Upvotes: 0

andyCao
andyCao

Reputation: 83

Use 0 1 number type instead. 0 for false and 1 for true when type transfer

Upvotes: 1

Chris
Chris

Reputation: 59491

The value attribute of option accepts only string or number types, what you have provided is a boolean.

Try instead wrapping it in double or single quotes. Like: "true" or "false", which are strings.

Upvotes: 6

Related Questions