title: React How to handle checked and unchecked events for checkbox using typescript
body: <p>Hi I am new to React and typescript. I am working on adding checked attribute for a checkbox but find it tricky. I searched across SO but still couldn't get it closer to working.</p>
  
  <p>Here is what I am trying to do: </p>
  
  <p>I am creating three checkbox components using a single child component[shown here]. They all have their own values that I need to pass dynamically. </p>
  
  <pre><code>interface ItemProps {
    readonly className?: string;
    readonly checked: boolean | undefined;
    readonly accentedUnchecked?: boolean;
    readonly imageUrl: string;
    readonly errorMessage?: string;
    readonly statusChecked?: boolean | undefined;
    readonly onChange: (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void;
    readonly handleClick: (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void; 
    };
  
    readonly hasError?: boolean;
    readonly title?: string;
    readonly value?: number;
    readonly description?: React.ComponentType;
  }
  export class Item extends React.Component&lt;
    ItemProps,
    {
      readonly isExpanded: boolean;
      readonly checkboxStatus: boolean;
      readonly temp: boolean;
      readonly checked: boolean;    
    }
  &gt; {
    constructor(props) {
      super(props);
      this.state = {
        isExpanded: false,
        checkboxStatus: false,
        temp: false,
        checked: this.state.temp
      };
      this.handleClick = this.handleClick.bind(this);
      this.onChange = this.onChange.bind(this);    
    }`
  
    private onChange(e: React.ChangeEvent&lt;HTMLInputElement&gt;) {   
      this.setState({ temp: e.currentTarget.checked });
    }
  
    private readonly handleClick = e =&gt;
      this.props.onChange({
        currentTarget: { checked: e.currentTarget.checked }
      } as any);
  
    render() {
  
      const unchecked = this.props.accentedUnchecked &amp;&amp; this.props.checked === false;
  
      return (
  
  &lt;label className="checkbox"&gt;
            &lt;input
              type="checkbox"
              checked={this.onChange} //Not working
              onChange={this.props.onChange}
              onClick={this.handleClick}
  
              id={"test"}
              data-id="0"
            /&gt;
  );
  
  </code></pre>
  
  <p>The problem is I am not sure how to set the checked attribute, based onClick. when I use </p>
  
  <pre><code>checked={this.props.checked}
  </code></pre>
  
  <p>I am getting all checkboxes checked. Or if I use </p>
  
  <pre><code>checked={this.handleClick}
  </code></pre>
  
  <p>I get error saying </p>
  
  <blockquote>
    <p>cannot assign void to a boolean" in typescript. </p>
  </blockquote>
  
  <p>Any suggestion on how this can be resolved will be very helpful</p>
  
  <p>Thanks in advance</p>