Push checkbox value to array on state onChange

Question

I want to allow users to select days of the week from checkboxes. When a checkbox is checked, the value of that checkbox should update this.state.days. Instead of adding to the array, it's simply overwriting this.state.days. Tried using simple spread operator, but I then get an error indicating that react cant convert null into object - this even happens when I set days to [1,2] so that it isn't undefined at the start. See change function below

this.state = {
    days:[]
}

handleDaySelect (event) {
    if (this.state.days) {
        var dayArr = [...this.state.days]
    } else {
        var dayArr = [];
    }
    dayArr.push(event.target.value)        
    this.setState({
        days: dayArr
    })
}

Render function:

render() {

    const daysOptions = ["Monday", "Tuesday", "Wednesday", "Thursday", 
    "Friday", "Saturday", "Sunday"].map((cur, ind) => {
        return (
            <div key={ind} className="checks" >
                <label>
                    <input type="checkbox" name={cur} value={cur} 
                    onChange={this.handleDaySelect} />{cur}
                </label>
            </div>
        )
    })
    return (
        <div id="newDeal" className="formContainer" >

            <div className="checkBoxContainer" >
                {daysOptions}
            </div>
        </div>
    )
}

Answer 1

You need to check if the value is previously there, if not you have to add it else remove it. Also you should make sure that you are writing

this.state = {
    days:[]
}

in constructor like

constructor() {
   super();
   this.state = {
      days:[]
    }
}

or if as a class Property you would write

state = {
    days:[]
}

Also don't forget to bind your handleDaySelect function .

Snippet:

handleDaySelect  = (event)  => {
   var dayArr = [...this.state.days];
   const value = event.target.value
   const index = dayArr.findIndex(day => day === value);
   if(index > -1) {
       dayArr = [...dayArr.slice(0, index), ...dayArr.slice(index + 1)]
   } else {
       dayArr.push(value);
   }
   this.setState({days: dayArr});
}

Answer 2

    handleDaySelect(event){
            let day_list = this.state.days;
            let check = event.target.checked;
            let checked_day = event.target.value;
            if(check){
                this.setState({
                    days: [...this.state.days, checked_day]
                })
            }else{ 
                var index = day_list.indexOf(checked_day);
                if (index > -1) {
                    day_list.splice(index, 1);
                    this.setState({
                        days: day_list
                    })
                } 
            }
        }

Hope this helps.