CODEWITHSUNDEEP
javascriptreactjsjsx
aspiringdev
aspiringdev

Reputation: 59

Unexpected token, expected "..." React

I want to put "defaultChecked" attribute to JSX input element but the compiler requires me to use spread operator for activeModal state? Why is that? The state is either true or false:

<input name="radio-size"value="small" type="radio" id="small" {**activeModal**?"checked":""} className="modal-content-sizes-form-option"></input>

Upvotes: 2

Views: 4364

Answers (1)

Quentin
Quentin

Reputation: 943097

JSX expects, that if you put an an expression inside {} somewhere that it expects a prop name, then that expression will be ...someObject where someObject contains a props to values mapping.

e.g.

const myObject = {
    name: "radio-size",
    value: "small",
    // etc
}

<input {...myObject} />

It doesn't expect a string of JSX to insert.

If you want to set a boolean prop, then just assign boolean to the prop:

<input checked={activeModal} (your other props) />

Upvotes: 5

Related Questions