Checkbox checked in React.js

Question

I'm trying to use the javascript function .checked() in React.js like this :

componentDidMount () {
    document.getElementById("myCheck").checked = true;
}

But I have an error in my console : "la propriété 'checked' n'existe pas sur le type HTMLlement"

How can I use this in React.js ?

Thank you

In React you have to update the state to re-render the component. Please post more code. — Dev
– Dev, Commented Aug 23, 2017 at 9:45
why you want to do it like this? react provides a better way of controlling elements, simply use <input checked={true} onChange={....}/> for controlled component, if you want to use uncontrolled component then use <input defaultChecked={true}/> — Mayank Shukla
– Mayank Shukla, Commented Aug 23, 2017 at 9:46
I would rely on your component state for the checkbox status, instead of modifying any properties of the DOM by hand. Take a look to this question and answer, since it handles a really similar problem. — andersuamar
– andersuamar, Commented Aug 23, 2017 at 9:50
@MayankShukla Thank you for your answer , it was very simple .. and I didn't think about it ! Thank you — Anaïs Saez
– Anaïs Saez, Commented Aug 23, 2017 at 9:57

Alexandr Dobrovolsky · Accepted Answer · 2018-09-21 02:18:48Z

1

It worked for me

<div className='container'>
    <input type='checkbox' ref='myAwesomeCheckbox' id={'scales'} />
    <label fhtmlForor="scales">Scales</label>
</div>

componentDidMount = () => {
  this.refs.myAwesomeCheckbox.checked = true;
}

answered Sep 21, 2018 at 2:18

Alexandr Dobrovolsky

661 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Checkbox checked in React.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related