Get state right after setState()

Question

I know setState() does not immediately mutate this.state. So in the code below, checkbox is always unchecked after clicking the button. How to fix this?

handleClick = () => {
  this.setState({tick: !this.state.tick})
}

render() {
  return (
    <button type='button' onClick={() => this.handleClick()} >
      <input type="checkbox" value={this.state.tick} />
      Tick here
    </button>
  )
}

Answer 1

use checked instead of value:

<input type="checkbox" checked={this.state.tick} />

from the spec:

checked: Boolean; if present, the checkbox is currently toggled on

value: The string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on