input checkbox not updating after re-render

React version: 16.4.2

The checkbox in the DOM is not checked after a state change.

constructor(props) {
    super(props);

    this.state = {
        checked: false
    }

componentDidMount() {
    this.setState({
        checked: this.props.checked
    });
}

render() {
    let checked = <input type='checkbox' onChange={() => {
        this.setState({checked: !this.state.checked});
    }} defaultChecked={this.state.checked} />

    return (
         // JSX
     )
}

Console logging checked, the first render returns a react.element type: 'input" with the following props

props:
    defaultChecked: false

Second render after state change

props:
    defaultChecked: true

However, in my app, the checkbox is not checked. If I explicit set the defaultChecked property to true, then it will be checked. If I default the state.checked to true, it will be checked. I’ve tried removing the onChange listener, suspecting that that may be the culprit, but it’s not.

My current workaround

constructor(props) {
    super(props);

    if (this.props.checked) {
        this.state = {
             checked: true
        }
    } else {
        this.state = {
             checked: false
        }
    }
}

Feels messy.

[a1theredbull]

Also getting the same issue with checked attribute set to state, state updating, and not updating DOM. The DOM updates (reflecting the new checked value) as soon as I change anything else in the state. This happens on my project for checkbox and radio input.

I’m using a fully controlled input in both cases. The state variable is updated in React dev tools, and I also printed out the updated value before render. It just seems the DOM won’t update in this particular case.

Unfortunately I couldn’t repro this on codepen so there must be some way my project is set up (along with the other people reporting this) that is triggering this effect.

UPDATE I figured out that I had a parent component that had an onClick that was calling evt.preventDefault(). I removed that call and the checkbox and radio inputs now update in the DOM when state is updated. I’m not sure why preventDefault would prevent a render of the DOM in this specific case, but I’m also fairly new to React and don’t know the inner workings. Is anyone able to shed some light on this?

Here’s a Code Sandbox demonstrating the issue: https://codesandbox.io/s/v67qwj1870

[julianCast]

For those with this problem, as @a1theredbull said, do not include preventDefault on the change function:

function onCheckedChanged(e)
  {
    //e.preventDefault();  <-- Remove this, it will mute the event.
    folder.setSelected(e.target.checked);
  }