How to use a ternary with a boolean in TypeScript?

Question

I am new to React and TypeScript. I want to set an attribute if a prop is true (boolean).

I am using Material UI's button, which can take disabled prop, eg <Button disabled>Disabled</Button>.

I have the following:

interface sectionProps {
  title: string;
  disabled?: boolean;
}

const Section = ({
  title,
  disabled,
}: sectionProps) => {

  const isDisabled = {disabled ? 'disabled' : ''};

  return (
    <Button {isDisabled} variant="outlined" color="primary" >
      Start
    </Button>
  )
};

But I get an error on compilation where it seems to want to replace the ? in the ternary with a ,. I don't understand this.

Unexpected token, expected ","

Would anyone be able to point me in the right direction?

itsanewabstract · Accepted Answer · 2020-06-24 02:13:53Z

2

This isn't an error with typescript, the error indicates an error with your javascript syntax. You're wrapping your ternary expression in curly braces, causing JS to think you're trying to define an object, hence why it's looking for a ,.

Change that line to this:

const isDisabled = disabled ? 'disabled' : '';

answered Jun 24, 2020 at 2:13

itsanewabstract

1,0365 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jdoroy · Accepted Answer · 2020-06-24 02:18:38Z

0

Change

const isDisabled = {disabled ? 'disabled' : ''};

to

const isDisabled = disabled ? 'disabled' : '';

Also:

Change

<Button {isDisabled} variant="outlined" color="primary" >

to

<Button disabled={isDisabled} variant="outlined" color="primary" >

answered Jun 24, 2020 at 2:18

jdoroy

9681 gold badge8 silver badges10 bronze badges

Comments

iamhuynq · Accepted Answer · 2020-06-24 02:16:00Z

0

You can try another way

return (
  <Button disabled ={disabled} variant="outlined" color="primary" >
     Start
  </Button>

answered Jun 24, 2020 at 2:16

iamhuynq

5,5572 gold badges17 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to use a ternary with a boolean in TypeScript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related