What am I doing wrong in this code, I don't know how else to write it I want to test the state invalidForm and render disabled or null depending.

state code UPDATE

if(valid) {
        return true;
    } else {
      this.setState({
        invalidForm: true
      })
    }
}


<button {this.state.invalidForm ? 'disabled' : null} type="submit">Submit</button>

The Error I am getting is

Unexpected
   token, expected "..."

What am I doing wrong in this code, I don't know how else to write it I want to test the state invalidForm and render disabled or null depending.

state code UPDATE

if(valid) {
        return true;
    } else {
      this.setState({
        invalidForm: true
      })
    }
}


<button {this.state.invalidForm ? 'disabled' : null} type="submit">Submit</button>

The Error I am getting is

Unexpected
   token, expected "..."

• javascript
• reactjs

Share Improve this question Follow edited Sep 10, 2018 at 23:33 Anders Kitson asked Sep 10, 2018 at 23:20 Anders KitsonAnders Kitson 1,54566 gold badges4444 silver badges114114 bronze badges 3

• 1 it's not HTML, JSX uses an XML syntax, so you need to specify a full attribute="value" string: <button disabled={this.state.invalidForm ? 'disabled' : false} [...] – Mike 'Pomax' Kamermans Commented Sep 10, 2018 at 23:29
• 1 @Mike'Pomax'Kamermans: That's not quite right: reactjs/docs/jsx-in-depth.html#props-default-to-true – Felix Kling Commented Sep 10, 2018 at 23:31
• CHECK YOUR FILE EXTENSION, SHOULD BE .tsx – mercury Commented Feb 20, 2021 at 3:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

While you can define props without a value, you cannot do that dynamically. Pass a value:

<button disabled={this.state.invalidForm}>Submit</button>

It shouldn't matter, but for clarity, if this.state.invalidForm is not a Boolean value, you can convert it to one:

<button disabled={Boolean(this.state.invalidForm)}>Submit</button>

Running example:

ReactDOM.render(
  <div>
    <button disabled={true}>Button 1</button>
    <button disabled={false}>Button 2</button>
  </div>,
  document.body
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

---

The parser expects ... because the {} syntax inside an opening "tag" is reserved for "spreading" props from objects.

For example:

const props = {disabled: true};
return <button {...props}>Submit</button>

is the same as

return <button disabled={true}>Submit</button>