React Native ListingEditScreen - onSelectItem is not a function

React Native
1

Please I need help.

I’ve Googled my eyes out but cannot fix this error. It happens each time I select a picker item.

I’ve also gone through Mosh’s code… Please help.

MY SOURCE CODE FOR AppPickerjs

// Import resources

import React, { useState } from ‘react’;

import { View, StyleSheet, TouchableWithoutFeedback, Modal, Button, FlatList } from ‘react-native’;

import { MaterialCommunityIcons } from ‘@expo/vector-icons’;

// Import custom files

import colors from ‘…/config/colors’;

import defaultStyles from ‘…/config/defaultStyles’;

import CustomText from ‘./CustomText’;

import CustomPickerItems from ‘./CustomPickerItems’;

// Component function

function CustomPicker({ icon, items, onSelectItem, placeholder, selectedItem }) {

// Set function state

const [modalVisible, setModalVisible] = useState(false);

return (

    <React.Fragment>

        <TouchableWithoutFeedback onPress={() => setModalVisible(true)}>

            <View style={styles.container}>

                {icon && <MaterialCommunityIcons style={styles.icon} name={icon} size={30} />}

                {/* <CustomText style={styles.text}>{selectedItem ? selectedItem : placeholder}</CustomText> */}

                {selectedItem ? (

                    <CustomText style={styles.text}>{selectedItem.label}</CustomText>

                ) : (

                    <CustomText style={styles.placeholder}>{placeholder}</CustomText>

                )}

                

                <MaterialCommunityIcons color={defaultStyles.colors.grey} name='chevron-down' size={30} />

            </View>

        </TouchableWithoutFeedback>

        <Modal visible={modalVisible} animationType='slide'>

            <Button title='Close' onPress={() => setModalVisible(false)} />

            

            <FlatList

                data={items}

                keyExtractor={item => item.value.toString()}

                renderItem={({ item }) => 

                    <CustomPickerItems 

                        label={item.label}

                        onPress={() => {

                            setModalVisible(false);

                            onSelectItem(item);

                            // console.log(item);

                        }}

                    />

                }

            />

        </Modal>

    </React.Fragment>

);

}

// Comoponent styles

const styles = StyleSheet.create({

container: {

    backgroundColor: colors.lightgrey,

    borderRadius: 25,

    flexDirection: 'row',

    width: '100%',

    padding: 15,

    marginVertical: 10,

},

icon: {

    color: colors.grey,

    marginRight: 10,

},

text: {

    flex: 1,

},

placeholder: {

    flex: 1,

    color: defaultStyles.colors.grey

},

})

// Export component

export default CustomPicker;

2

Is the “onSelectItem” prop being set when render the “CustomPicker” component from the parent component? You’re probably seeing this error because when your code tries to call “onSelectItem” and it is undefined and is throwing this error.

3

Yes… the “onSelectItem” prop is being set when being rendered in the “CustomPicker” component. Just like Mosh’s code.
.
CUSTOM PICKER COMPONENT CODE
.
// Import resources

import React, { useState } from ‘react’;

import { View, StyleSheet, TouchableWithoutFeedback, Modal, Button, FlatList } from ‘react-native’;

import { MaterialCommunityIcons } from ‘@expo/vector-icons’;

// Import custom files

import colors from ‘…/config/colors’;

import defaultStyles from ‘…/config/defaultStyles’;

import CustomText from ‘./CustomText’;

import CustomPickerItems from ‘./CustomPickerItems’;

// Component function

function CustomPicker({ icon, items, onSelectItem, placeholder, selectedItem }) {

// Set function state

const [modalVisible, setModalVisible] = useState(false);

return (

    <React.Fragment>

        <TouchableWithoutFeedback onPress={() => setModalVisible(true)}>

            <View style={styles.container}>

                {icon && <MaterialCommunityIcons style={styles.icon} name={icon} size={30} />}

                {/* <CustomText style={styles.text}>{selectedItem ? selectedItem : placeholder}</CustomText> */}

                {selectedItem ? (

                    <CustomText style={styles.text}>{selectedItem.label}</CustomText>

                ) : (

                    <CustomText style={styles.placeholder}>{placeholder}</CustomText>

                )}

                

                <MaterialCommunityIcons color={defaultStyles.colors.grey} name='chevron-down' size={30} />

            </View>

        </TouchableWithoutFeedback>

        <Modal visible={modalVisible} animationType='slide'>

            <Button title='Close' onPress={() => setModalVisible(false)} />

            

            <FlatList

                data={items}

                keyExtractor={item => item.value.toString()}

                renderItem={({ item }) => 

                    <CustomPickerItems 

                        label={item.label}

                        onPress={() => (

                            setModalVisible(false),

                            onSelectItem(item)

                            // console.log(item);

                        )}

                    />

                }

            />

        </Modal>

    </React.Fragment>

);

}

// Comoponent styles

const styles = StyleSheet.create({

container: {

    backgroundColor: colors.lightgrey,

    borderRadius: 25,

    flexDirection: 'row',

    width: '100%',

    padding: 15,

    marginVertical: 10,

},

icon: {

    color: colors.grey,

    marginRight: 10,

},

text: {

    flex: 1,

},

placeholder: {

    flex: 1,

    color: defaultStyles.colors.grey

},

})

// Export component

export default CustomPicker;

4

I don’t think there is anything wrong with your CustomPicker code. The value of “onSelectItem” is passed in as a prop.

What I was asking is the parent element that is using CustomPicker passing down an “onSelectIem” prop down to your CustomPicker?

5

Okay… ListingEditScreen uses the CustomPicker like this:

<CustomPicker

                name='category'

                items={categories}

                placeholder='Category'

            />

And in CustomFormPicker uses CustomPicker it like so:

<CustomPicker

            items={items}

            onSelectItem={(item) => setFieldValue(name, item)}

            placeholder={placeholder}

            selectedItem={values[name]}

        />
6

In your ListingEditScreen you aren’t passing a onSelectItem prop down to your CustomPicker

7

I’ve done everything I possibly can… re-watched videos and gone through the code and cannot solve this. Also have more errors showing up. Very discouraging when things work for the instructor and you follow everything and still find errors. Thanks for trying to help.

8

I have the same issue. The page looks perfect but when i select an item in the picker it throws the onSelectItem is not a function error. Would love to know the solution.

9

What specific section of the course and lesson are you on? Because Mosh develops the code as he goes along in the course, and the finished code is different, other students may be better able to help if they know exactly where you are.

10

Thanks Dave for replying so quickly. I actually spotted my mistake. In AppFormPicker.js in the Picker component i had typed onSelectedItem={(item) => setFieldValue(name, item)}. I should have typed onSelectItem=…
It’s now working perfectly.
Cheers
Matt

11

Matt - Good to hear you got “unstuck”! I’m learning coding and share the frustration of being stuck and unable to proceed with a course. And, good of you to share the solution.

Cheers,
Dave

12

Still stuck here… Please help!
.
ERROR MESSAGE
.
TypeError: onSelectItem is not a function. (In ‘onSelectItem(item)’, ‘onSelectItem’ is an instance of Array)
.
.
CUSTOMPICKER CODE
.
<FlatList

                    data={items}

                    keyExtractor={item => item.value.toString()}

                    renderItem={({ item }) => 

                        <CustomPickerItems 

                            item={item}

                            label={item.label}

                            onPress={() => (

                                setModalVisible(false),

                                onSelectItem(item)

                                // console.log(item);

                            )}

                        />

                    }

                />

LISTINGDETAILSSCREEN CODE
.
<CustomPicker

                    name='category'

                    items={categories}

                    placeholder='Category'

                    onSelectItem={categories}

                />
13

When the JS parser runs into a problem, the error message(s) it gives may not make the error clear.

In this case, I think you need a semicolon after

setModalVisible(false);

and

onSelectItem(item);

Give that a try. (Seems like your code editor should have flagged a warning.)

14

Any update on this issue? I am having the exact challenge. I even used Mosh’s source code and the issue is still there.

15

Hi, i had same problem to fix it u need to define onSelectItem ,SelectedItem in app.js
as the fallowing :

// the schema of data or categories ={label:'',value:'} 
const categories = {/*your data*/}
const [data, setData]= useState('');

<CustomPicker items={categories} SelectedItem={data} onSelectItem={item=>setData(item)}/>
16

I found a solution: In the AppPicker.js change the prop onSelectItem to be a different name (e.g returnFunc). It appears that onSelectItem is now a reserved word

17

Has anyone found the solution for this??? I am facing this issue. Please help!!

18

OMG, please tell me that someone solved that issue?
4th day I stuck on this one.