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 "..."
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.