React Unexpected token , expected "..."

Question

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 "..."

Answer 1

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.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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>