Удалить из массива, если его непроверено с помощью React

Question

Когда отмечено, добавьте в массив. Если флажок снят, удалите из массива. Мой код ниже работает, но null находится на своем месте. Мне нужно полностью удалить его. Как?

... 

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(
    <div><input ref="opt1" type="checkbox" value="foo" onClick={this._product}/></div> 
) 
} 

... 

Answer 1

Я думаю, было бы проще, если вы сохранили множество вариантов, где каждый вариант имеет выбранный свойство. Что-то в строках:

... 
constructor(props) { 
    super(props); 

    this.toggleOption = this.toggleOption.bind(this); 
} 

getInitialState(){ 
    return { 
    email: this.props.user, 
    options: [ 
     { value: 'Foo1', otherProperty: 'something', checked: false }, 
     { value: 'Foo2', otherProperty: 'something', checked: false }, 
    ], 
    } 
} 

toggleOption(index) { 
    // Clone the options array 
    const options = this.state.options.slice(); 

    // Toggle the option checked property 
    if(options[index]) { 
    options[index].checked = !options[index].checked; 
    } 

    // Update the component state 
    this.setState({ 
    options 
    }); 
} 

getSelectedOptions() { 
    // Use this to grab an array of selected options for whatever reason... 
    return this.state.options.filter(option => option.checked); 
} 

render: function(){ 
    return(
    <div> 
     { this.state.options.map((i, option) => { 
     <input type="checkbox" checked={option.checked} value={option.value} onClick={() => this.toggleOption(i) } /> 
     }) } 
    </div> 
) 
} 
...