JT's

I was working on checkboxes in one of my React Components.

I kept on getting the following error.

Looking into it in depth, I ran into this SO post that points at the heart of the issue.

https://stackoverflow.com/questions/36715901/reactjs-error-warning

So React deals with form control in two ways

1. Controlled Components

• `value` for most `<input>` and `checked` for `checkbox` or `radio`
• `onChange` handler

const { render } = ReactDOM;

class Demo extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      checked: true
    };
    
    this.checkboxHandler = this.checkboxHandler.bind(this);
  }
  
  checkboxHandler(e) {
    this.setState({
      checked: e.target.checked
    });
  }
  
  render() {
    return (
      <  input type="checkbox" checked={this.state.checked} onChange={this.checkboxHandler}  />
    );
  }
}

render(
  < Demo />,
  document.getElementById('demo')
);

• `defaultValue` or `defaultChecked`

<  input 
type="checkbox" 
defaultChecked={this.props.checked=}  />