react-native , customer flatlist picker, returning previous values on selection

Question

Below is the code component for the customer picker

import React, { useEffect, useState } from "react";
import { connect } from 'react-redux';
import {
    TouchableOpacity,
    FlatList,
    SafeAreaView,
    StatusBar,
    StyleSheet,
    Text,
    View,
    Button,
    Alert,
} from "react-native";
import { screenHeight, screenWidth } from "../constants";

const DATA = [
    {
        id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
        title: "Client Not Found"
    },
    {
        id: "58694a0f-3da1-471f-bd96-145571e29d72",
        title: "Client refused"
    },

];

const Item = ({ item, onPress, style }) => (
    <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
        <Text style={styles.title}>{item.title}</Text>
    </TouchableOpacity>
);


const StatusOptions = (props) => {

    const [selectedId, setSelectedId] = useState(null);
    const renderSeparator = () => (
        <View
            style={{
                backgroundColor: "grey",
                height: 0.8
            }}
        />
    );
    const ListHeader = () => {
        //View to set in Header
        return (
            <View style={{ height: 20 }}></View>
        );
    };

    
    const renderItem = ({ item }) => {
        const backgroundColor = item.id === selectedId ? "#6cd9ff" : "white";

        return (
            <Item
                item={item}
                onPress={() => {
                    setSelectedId(item.id);
                    console.log("SELECTED ID _ STATUSOPTIONS component : ", selectedId);

                    const val = DATA.filter(status => status.id == selectedId).map(filteredStatus => filteredStatus.title);

                    console.log("VALLLLLLLLLLLLLLLLLLLLLLLUUUUUUEEEEEEEEEEEEEEEEEEEE:::: ", val);

         props.navigation.navigate('AnotherScreen');          
                }}
                style={{ backgroundColor }}
            />
        );
    };

    return (

        <View style={{ bottom: 0, flex: 1, position: 'absolute', width: screenWidth, }}>
            <View style={styles.container}>
                <FlatList
                    data={DATA}
                    renderItem={renderItem}
                    keyExtractor={(item) => item.id}
                    extraData={selectedId}
                    ItemSeparatorComponent={renderSeparator}
                    ListHeaderComponent={ListHeader}
                    style={{
                        backgroundColor: "white",
                        width: "100%",
                        borderTopRightRadius: 20,
                        borderTopLeftRadius: 20,
                        zIndex: 1,
                    }}
                />
            </View>

            <View style={{ backgroundColor: "grey", height: 0.4 }} />

            <View style={styles.closeButtonContainer}>
                <TouchableOpacity style={styles.closeButton}
                    onPress={() => {
                        props.setStatusOptionsVisible(false)
                    }}>
                    <Text style={styles.title}>Close</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
};

function mapStateToProps(state) {
    return {
        StatusOptionsVisible: state.volunteerItems.statusOptionsVisible,
        currentTaskItemId: state.taskItems.taskItemId,
    };
}

function mapDispatchToProps(dispatch) {
    return {
        setStatusOptionsVisible: (visible) => dispatch({ type: 'SET_STATUS_VISIBLE', statusVisibility: visible }),

    };
}

export default connect(mapStateToProps, mapDispatchToProps)(StatusOptions);

const styles = StyleSheet.create({
    closeButton: {
        backgroundColor: 'lightgrey',
        borderRadius: 10,
        height: 50,
        justifyContent: 'center',
        width: '90%',
    },
    closeButtonContainer: {
        alignItems: 'center',
        height: 90,
        justifyContent: 'center',
        backgroundColor: 'white',
    },
    textStyle: {
        textAlign: "center",
    },
    container: {
        borderRadius: 30,
        flex: 4,
        width: screenWidth,
    },
    item: {
        padding: 20
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
        color: "black",
        textAlign: "center"
    }
});

the console Log : ("SELECTED ID _ STATUSOPTIONS component : ", selectedId) in render Item function returns null for first picker item selection and the returns the previous value for the next picker item selection , can anyone please help with fixing it ?

after when you use setState value is previous, so you need use useEffect for reading updated value. Or you can use in onPress item.id instead of selectedId. More info here https://stackoverflow.com/questions/54119678/is-usestate-synchronous — Vasyl Nahuliak, Jan 30 '21 at 08:02
Thanks much!!, this works for sure , i didnt think to try printing only the item.id and was always trying to print state values -_-. — Dewalkar Agarwal, Jan 30 '21 at 08:40
also after getting the value from the picker i am trying to navigate to AnotherScreen, but its failing with exception : ERROR TypeError: undefined is not an object (evaluating 'props.navigation.navigate'), any idea why is that , although in the props i do see the navigation data — Dewalkar Agarwal, Jan 30 '21 at 09:00
try this: const navigation = useNavigation(); write this after usestate — Jagjeet Singh, Jan 30 '21 at 09:47

Jagjeet Singh · Accepted Answer · 2021-01-30T07:56:03.557

2

Try to use this

 useEffect(() => {
          console.log("SELECTED ID _ STATUSOPTIONS component : ", selectedId);
          if(selectedId != null) {
          const val = DATA.filter(status => status.id == selectedId).map(filteredStatus => filteredStatus.title);
   
         console.log("VALLUUEEEEEEEEEEEEEEEEEEEE:::: ", val);
}
        }, [selectedId])

edited Jan 30 '21 at 07:56

answered Jan 30 '21 at 07:47

Jagjeet Singh

505
3
8

react-native , customer flatlist picker, returning previous values on selection

1 Answers1