title: Reactjs - toggle switches not working when using local array
body: <p>I have an update for anyone that is reading this....
  I think I've found the issue - when you set a toggle switch to checked it's also set to READONLY. So I can't toggle the toggle switch now.</p>
  
  <p>I have a toggle component of type checkbox in React.</p>
  
  <p><code>products</code> is a locally set array for testing purposes as <code>this.props.products</code>  is empty for now.</p>
  
  <p>Through testing, I've noticed that if I use:
  <code>selected={(products.indexOf(p) &gt; -1)}</code> the toggles stop working. They display correctly but I'm not able to toggle them. They do not appear disabled or are set to disabled in HTML element.</p>
  
  <pre><code>     products=['ProdA', 'ProdB', 'ProdC];
  
       customerProducts.forEach(p =&gt; {
         content(): string[] {
         const toggles = [];
          if(isEnabled){
            toggles.push( 
              &lt;ToggleComponent
                value={p}
                selected={(products.indexOf(p) &gt; -1)} 
                onChange={this.props.onChange}
                disabled={false}
              /&gt;
             );
        }
  
       render() {
          {this.content()}
       }
  
      //TOGGLE COMPONENT
      render() {
      const {id, title, disabled, name, value, selected} = this.props;        
      return (
        &lt;div&gt;
          &lt;fieldset&gt;
            &lt;div className="form-structure"&gt;                    
              &lt;label className={!this.props.disabled ? 'checkbox-switch-label' : 'checkbox-switch-label checkbox-switch-label-disabled'}&gt;
              &lt;input id={id} type="checkbox" checked={selected} className="checkbox-switch" role="Switch" disabled={disabled} name={name} value={value} onChange={this.validate} /&gt;
              &lt;span/&gt;{title}
              &lt;/label&gt;
           &lt;/div&gt;
         &lt;/fieldset&gt;
        &lt;/div&gt;
      )}
  </code></pre>
  
  <p>I can see there is an invalid Event Listener in my dev Tools: dispatchDiscreteEvent
  The toggles are appearing, are not visibly disabled, (there is no disabled attribute in the html element), but clicking them does not toggle them on/off.
  Am I supposed to be setting 'disabled' against a state value instead?
  I already have an onChange function elsewhere for getting the values.</p>