Gabotronix's avatar

React Native: selectedDays.includes is not a function

Hi everybody, I'm new to react-native and I have an input where I can choose multiple days of a week, if I click on a day which is alreadyAdded the day is removed from selectedDays array, however when I click on a day I get the following error:

TypeError: selectedDays.includes is not a function. (In selectedDays.includes(index+1) selectedDays.includes is undefined

My code:


const [ dayOptions, setDayOptions ] = useState([ 'Lunes','Martes','Miercoles','Jueves','Viernes','Sabado','Domingo']);
    const [ selectedDays, setSelectedDays ] = useState([1]);


const clickedDay = (id)=>
    {
        const index = selectedDays.indexOf(id);
        if (index > -1)
        {
            setSelectedDays(selectedDays.splice(index, 1));
        }
        else
        {
            setSelectedDays(selectedDays.push(id));    
        }
    }


<View style={{ width:'100%',height:45,flexDirection:'row',alignItems:'center',flexWrap:'nowrap', justifyContent:'space-between' }}>
                        {dayOptions.map((option,index) => {return (
                        <TouchableOpacity  key={option.title} onPress = {() => {clickedDayOptions(index+1) }} style={{ width:'13.2%', height:'100%', flexDirection:'row', alignItems:'center',justifyContent:'center', borderRadius:5,borderWidth:1, borderColor:'rgba(0,0,0,0.2)', ...selectedDays.includes(index+1) ? { backgroundColor: 'rgb(255,52,89)' } : { backgroundColor:'white' }, }}>
                            <Text style={{ fontWeight:'bold',fontSize:14, ...selectedDays.includes(index+1) ? { color: 'white' } : { color:'rgb(68,68,68)' }, }}>{ option }</Text>
                        </TouchableOpacity>)
                    })}     
</View>

I tried changing includes for indexOf() > 1 and I get the same error, I usually get this when it's not an array but I defined selectedDays as an array in hooks...

0 likes
0 replies

Please or to participate in this conversation.