1

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>

aspiringdev
  • 49
  • 1
  • 6

1 Answers1

4

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) />
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • What if I want to put a comment in that context? – Joymaker Mar 24 '23 at 13:59
  • @Joymaker — Stackoverflow has [a feature for asking new questions](https://stackoverflow.com/questions/ask). Link back to this answer (see the *Share* link above) if it will help provide context. Read [ask] and make an attempt before you actually ask the question though. Don't forget to include a [mcve]. – Quentin Mar 24 '23 at 14:02