javascript - use ! in Reactjs Component in JSX

Question

I want to change Material-UI Button component.

<Button>

to

<Button disabled>

So my source code is this,but it shows the Parsing error: Unexpected token, expected "..."

<Button {!this.state.enClick ? "" : disabled }><Button>

Not in Button tag {!A ? B:C } works.

<Button>
{!this.state.enClick ? "OK":"No"}
</Button>

What is the best practice for this purpose??

question from:https://stackoverflow.com/questions/65911927/use-in-reactjs-component-in-jsx

Answer 1

This:

<Button disabled>

is short for this:

<Button disabled={true}>

The curly brackets pop you back into plain javascript, and you can put any javascript expression in there. Assuming this.state.enClick is a boolean, you can conditionally set disabled like this:

<Button disabled={this.state.enClick}>