意外的令牌，预期的“...”反应

Question

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>

Answer 1

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.

eg

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) />