CODEWITHSUNDEEP
javascriptcssreactjsnext.js
Irina
Irina

Reputation: 69

How to assign a new var based on a disabled/enabled button?

Let's say I have a button that is disabled when the condition is false (opacity: 0.3), and enabled when the condition is true (opacity: 1).

Let's forget about the actual condition for now -- I would like to actually check when the button is disabled (opacity: 0.3) and assign a value to a new variable based on that.

For example, if the button is disabled (opacity: 0.3), then newVar = false. if the button is enabled (opacity: 1), then newVar = true.

How can I achieve that? Below is the code of my current button

<NextBtn
    orange
    withIcon
    iconStyle={{ width: '9px', height: 'auto' }}
    icon={t.image.icon.bottomChevron_orange}
    event={() => checkForError('next')}
    className="buttonNextClass"
    style={
        checkEmptyField() === true
        ? { opacity: 0.3, pointerEvents: 'none' }
        : { opacity: 1 }
    }
    >
    {c('form.content.next')}
</NextBtn>

Upvotes: 0

Views: 91

Answers (1)

Medi
Medi

Reputation: 1036

Maybe by creating a setter to set the value of newVar:

const setNewVar = (param)=>{
 newVar = param;
}
<NextBtn
    orange
    withIcon
    iconStyle={{ width: '9px', height: 'auto' }}
    icon={t.image.icon.bottomChevron_orange}
    event={() => checkForError('next')}
    className="buttonNextClass"
    style={
        checkEmptyField() === true
        ? setNewVar(false) && { opacity: 0.3, pointerEvents: 'none' }
        : setNewVar(true) &&  { opacity: 1 }
    }
    >
    {c('form.content.next')}
</NextBtn>

Upvotes: 1

Related Questions