Parameter within an arrow function within a prop is not accessible (React Native)

Question

I'm trying to pass a parameter (item, which is a data item within a FlatList) to an arrow function within a prop. Popover is a react-native-ui-kitten element. My code is given below:

    function PostRenderItem({ item }){
        const [deleting, setDelete] = useState(false);
        //item is accessible at this point
        return(
                //item is accessible at this point
                <Popover
                visible={deleting}
                anchor={(item) => {
                    return(
                        <Text>{item.content}</Text>
                        //item undefined at this point
                    )
                }}>
                    <Button>Delete me!</Button>
                </Popover>
        )
    };

The issue here is that item is undefined within the arrow function declared as the anchor prop. What is the proper solution here?

you don't need to include item as the arrow function parameter since you already have it above — Jorge Guerreiro, Dec 29 '20 at 18:17

score 0 · Accepted Answer · answered Dec 29 '20 at 18:16

<Popover
      visible={deleting}
      anchor={() => (
        <Text>{item.content}</Text> /** item is already declared in the upper-scope */
      )}
    />

OR

<Popover visible={deleting} anchor={() => renderContent(item)} />

const renderContent = item => <Text>{item.content}</Text>;

Parameter within an arrow function within a prop is not accessible (React Native)

1 Answers1