title: Remove from array if unchecked with React
body: <p>When checked, add to array. When unchecked, remove from array. My code below works but <code>null</code> is placed in its place. I need to remove it completely. How?</p>
  
  <pre><code>...
  
  getInitialState: function(){
    return{
      email: this.props.user,
      product: []
    }
  },
  
  _product: function(){
    if (this.refs.opt1.checked) {
        var opt1 = this.refs.opt1.value;
    } else {
      this.setState({ product: this.state.product.filter(function(_, i) { return i  }) });
    };
  
    if (this.refs.opt2.checked) {
      var opt1 = this.refs.opt2.value;
    } else {
      this.setState({ product: this.state.product.filter(function(_, i) { return i }) });
    };
    var array = this.state.product.concat([opt1]);
    this.setState({
        product: array
    });
  },
  
  render: function(){
    return(
     &lt;div&gt;&lt;input ref="opt1" type="checkbox" value="foo" onClick={this._product}/&gt;&lt;/div&gt;
    )
  }
  
  ...
  </code></pre>