import React, {Component} from 'react'


class Source extends Component {
  constructor(props) {
    super();
    this.state = {
      selected: props.source.selected
    }
    this.clickCheckbox = this.clickCheckbox.bind(this)
    this.setStyle = this.setStyle.bind(this)
  }

  clickCheckbox() {
    this.state.selected === true ?
      this.setState({
        selected: false
      })
       :
        this.setState({
          selected: true
        })

    }

  

  setStyle() {
    if (this.state.selected === true) {
      return {background: 'yellow'}
    } else {
      return {background: 'white'}
    }
  }

  render() {
    var style = {background: 'yellow'}
    return(
      <div className="source" onClick={this.clickCheckbox} style={this.setStyle()}>
        <h3>{this.props.source.name}</h3>
        <p>{this.props.source.description}</p>
        <input type="checkbox"  id={this.props.source.id} name={this.props.source.name} value={this.props.source.id} checked={this.state.selected} className="hidden" onChange={this.props.toggleSource(this.props.source.id)}/>
      </div>
    )
  }
}

export default Source

@@ -268,17 +268,64 @@
 this)%0A  
-%7D
+  this.clickDiv = this.clickDiv.bind(this)%0A  %7D%0A%0A
 %0A%0A  clic
@@ -501,16 +501,67 @@
  %7D)%0A
+      this.props.toggleSource(this.props.source.id)
 %0A    %7D%0A%0A
   %0A%0A
@@ -556,18 +556,16 @@
 %0A    %7D%0A%0A
-  
 %0A%0A  setS
@@ -708,16 +708,95 @@
  %7D%0A  %7D%0A%0A
+  clickDiv() %7B%0A    document.getElementById(this.props.source.id).click();%0A  %7D%0A%0A
   render
@@ -900,24 +900,19 @@
 is.click
-Checkbox
+Div
 %7D style=
@@ -1204,48 +1204,21 @@
 his.
-props.toggleSource(this.props.source.id)
+clickCheckbox
 %7D/%3E%0A

Fix toggleSource to handle default not selected