Array related issue in React Native

Question

import React from 'react';
import {
    View,
    ScrollView,
    Image,
    Dimensions,
    TextInput,
    Text,
    StatusBar,
    TouchableHighlight,
    Linking,
    Keyboard,
    CameraRoll,
    KeyboardAvoidingView
} from 'react-native';
import {connect} from 'react-redux';
import {ActionCreators} from '../redux/actions';
import {bindActionCreators} from 'redux';
import Colors from '../constants/Colors';
import api from '../api';
import {
    getEmailAddress,
    showError,
    renderMessageBar,
    registerMessageBar,
    unregisterMessageBar
} from '../utils/ComponentUtils';
import {
    regularHeader,
    mainHeader
} from '../utils/Headers';
import {NavigationActions} from 'react-navigation';
import {SelectionLimitDialog} from '../utils/Dialogs';
import {ifIphoneX, isIphoneX} from 'react-native-iphone-x-helper';
import {SafeAreaView} from 'react-navigation';

// specific component imports.
import {List, ListItem} from 'react-native-elements'
import {Button} from 'react-native-elements'
import Loader from '../components/Loader';
import LoaderError from '../components/LoaderError';
import SelectedPhoto from '../components/SelectedPhoto';

class MultiSafeeScreen extends React.Component
{
    static navigationOptions = ({navigation}) => {
        const {params} = navigation.state;
        const isIncome = params ? params.isIncome : false;
        const notificationAction = params ? params.notificationAction : () => {};
        const isShowBack = params ? params.isShowBack : false;

        return mainHeader({
            isShowBack: isShowBack,
            backAction: () => navigation.goBack(),
            notificationAction: () => notificationAction(),
            income: isIncome
        });
    };

    constructor(props) {
        super(props);

        this.selectedPhotos = [];

        this.state = {
            photos: null,
            loader: {
                loading: 0,
                message: "Loading photos..."
            }, 
            selectedPhotos: [],
            supportLength: 5
        };

        this.props.navigation.setParams({notificationAction: this.onNotification, isIncome: this.props.isNewNotifications});
    }

    UNSAFE_componentWillReceiveProps(newProps) {
        if (newProps.isNewNotifications !== this.props.isNewNotifications) {
            this.props.navigation.setParams({notificationAction: this.onNotification, isIncome: newProps.isNewNotifications});
        }          
    }

    componentDidMount() {
        registerMessageBar(this.refs.alert);

        let options = {
            first: 30,
            assetType: 'Photos',           
        }

        CameraRoll.getPhotos(options)
        .then(r => {
            this.setState({
                photos: r.edges,
                loader: {
                    loading: 1,
                    message: "Loading photos..."
                },                                 
            });
        })
        .catch((err) => {
             //Error Loading Images
        });

        StatusBar.setHidden(false);
    }

    componentWillUnmount() {
        unregisterMessageBar();

        this.props.setSelectedPhotos(0);
    }

    onNotification = () => {
        this.props.setNewNotifications(false);
        this.props.navigation.navigate("Notifications");
    }

    closeKeyboard = () => {
        Keyboard.dismiss();
    }

    onSelectPhoto = (photo, index) => {
        let photos = new Set([...this.selectedPhotos]);
        let len = photos.size + 1 ;
        console.log('len = ', len)

        if (len > this.state.supportLength) {
            this.limitDialog.open();
        }
        else if (len === this.state.supportLength) {
            this.setState({selectedPhotos: this.selectedPhotos});
            this.props.setSelectedPhotos(len); 
            console.log('setSelectedPhotos= ', this.props.setSelectedPhotos)
        }
        else {
            photos.add(photo);
            this.selectedPhotos = Array.from(photos);
        }
    }

Hey I would appreciate some guidance with my code , particularly with onSelectPhoto function where I try to run through an array, it works, but only partially, it doesn't shows an limit message when user selects more than 5 photos which is the limit and when going to next screen it shows only 4 photos out of 5.I guess the problem is that when the value equals to 5 I dont add anything to the array and therefore his value stays 5 because I count the size according to the size of the array. What would be the right way to add to the array so the value will change accordingly? full code: https://pastebin.com/m0gxUCBt

Answer 1

Assuming that your supportLength is 5 that should do the work. Try debugging you code using console.log to see the value in the variable len and this.state.supportLength.

Another way of debugging witch I prefer is using breakpoints on you code to see you actual flow of execution of you code.

If you don't know how to do it. Check this article https://facebook.github.io/react-native/docs/debugging.html

onSelectPhoto = (photo, index) => {
    let photos = new Set([...this.selectedPhotos]);
    let len = photos.size ;
    console.log('len = ', len)

    if (len >= this.state.supportLength) {
        this.limitDialog.open();
    }
    else if (len === this.state.supportLength) {
        this.setState({selectedPhotos: this.selectedPhotos});
        this.props.setSelectedPhotos(len); 
        console.log('setSelectedPhotos= ', this.props.setSelectedPhotos)
    }
    else {
        photos.add(photo);
        this.selectedPhotos = Array.from(photos);
    }
}