array.includes() is not a function

Question

It works for the first click, but when i click it again to unselect it, it shows me error :

state.selectedStudents.includes is not a function. (In 'state.selectedStudents.includes(action.item)', 'state.selectedStudents.includes' is undefined)

import {
  SELECT
} from "../actions/postActionTypes";

const initialState = {
  students: ['Aditya', 'Rohan', 'Hello'],
  selectedStudents: []
}

const selectReducer = (state = initialState, action) => {


  switch (action.type) {
    case SELECT:
      return {
        ...state,
        selectedStudents: state.selectedStudents.includes(action.item) ? state.selectedStudents.splice(state.selectedStudents.indexOf(action.item), 1) : state.selectedStudents.push(action.item)
      }
      default:
        return state;
  }

}

export default selectReducer;

Answer 1

First of all state.selectedStudents.includes is not a function. means that state.selectedStudents is not an array. so what is it?

.push() doesn't return the array, it returns the length of the array after push. based on MDN:

Array.push() return value: The new length property of the object upon which the method was called.

So after the first SELECT action, your state chages to this:

state = {
  students: ['Aditya', 'Rohan', 'Hello'],
  selectedStudents: 1, // <- it's a number, not an array.
}

And the second time you fire SELECT action, state.selectedStudents.includes(action.item) throws and error because state.selectedStudents is 1 which isn't an array.

Change your switch case to this:

switch (action.type) {
  case SELECT:
    return {
      ...state,
      selectedStudents: state.selectedStudents.includes(action.item) ?
        state.selectedStudents.filter(student => student.id !== action.item.id) :
        [...state.selectedStudents, action.item] // <- no mutation, creates a new array.
    }
  default:
    return state;
}

Answer 2

state.selectedStudents.push(action.item)

returns the new length of the array and is not a list. so the next time you try it the type number does not have the includes method.