I am having an issue with the following screen that includes a flatlist. I get data in offerState using its context. From there I display the data using a flatlist and stylizing it using the component showOffers.
The problem: When I click on "Accept Game" the item data that is passed to the function acceptedPress is the wrong item data. Example, if I press 'Accept Game' on the second item in the flatlist I get the third item data or first item data.
I have added capitalized comments to where the wrong data is being sent to and where it is being passed into.
const FeedScreen = ({ navigation }: any): JSX.Element => { const { state: offerState, getOffers } = useContext(OfferContext); const { state: acceptState, acceptOffer, clearErrorMessage } = useContext(AcceptContext); const { state: user, signout } = useContext(AuthContext); const [isAcceptVisible, setIsAcceptVisible] = useState(false); const [isDeleteVisible, setIsDeleteVisible] = useState(false); const [refreshing, setRefreshing] = useState(false); const onAccept = () => { setIsAcceptVisible(true); }; const onDelete = () => { setIsDeleteVisible(true); }; // get offers Collection const getOffersData = useCallback(async () => { await getOffers(); setRefreshing(false); }, []); useEffect(() => { getOffersData(); }, [getOffersData]); const onRefresh = () => { setRefreshing(true); getOffersData(); }; // component for getting 'open' and 'closed' offers const showOffers = (item): JSX.Element => { const acceptedPress = (docId: string, uid: string, username: string, createdUser: string, houseWager: number, gameState: string) => { console.log('Pressed accepted'); console.log(docId) // THIS IS GIVING ME THE WRONG docId acceptOffer(docId, uid, username, createdUser, houseWager, gameState); if (acceptState.errorMessage == ''){ setIsAcceptVisible(!isAcceptVisible) onRefresh(); } }; var homeTeam = item.team; var awayTeam = item.otherTeam; return (<View style={styles.container}> {item.gameState === 'closed'&&<View style={styles.gameAccepted}><Text style={styles.gameAcceptedText}>Game Already Accepted</Text></View> } {item.createdUser != user?.username && item.gameState === 'open'&&<TouchableOpacity style={styles.buttonContainer} onPress={onAccept}><Text style={styles.buttonText}>Accept Game</Text></TouchableOpacity> }// popup for checking if you want to accept or not<ReactNativeModal animationIn="fadeInUp" animationOut="fadeOutDown" isVisible={isAcceptVisible}><AppBlock flex center middle><AppBlock style={styles.modal}><AppBlock flex middle><Text style={{color: '#FFF', textAlign:'center', fontSize: 20}}> Accept Offer?</Text> {acceptState.errorMessage ? <Text style={{color: 'red', textAlign:'center'}}>{acceptState.errorMessage}</Text> : null}</AppBlock><AppBlock row space="between"><AppButton text="Close" textColor="#FFF" style={styles.closeBtn} textStyle={{ fontSize: appSize(16) }} onPress={() => {setIsAcceptVisible(!isAcceptVisible); clearErrorMessage();}} /><AppButton text="Accept" textColor="#000" style={styles.acceptBtn} textStyle={{ fontSize: appSize(16) }} onPress={() => {acceptedPress(item.docId, user?.uid, user?.username, item.createdUser, item.houseWager, item.gameState);}}// THIS IS PROBABLY SENDING THE WRONG item INFO BUT I DO NOT KNOW WHY /></AppBlock></AppBlock></AppBlock></ReactNativeModal></View> ); }; return (<AppBlock flex center background={colors.bgColor} padding={[10, 0, 0]}><SafeAreaView style={{ flex: 1, overflow: 'visible' }}><FlatList refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} title="Pull to refresh" tintColor="#ffd966" titleColor="#ffd966" />} data={offerState} keyExtractor={doc => doc.docId} renderItem={({ item }) => (showOffers(item))} /></SafeAreaView></AppBlock> );};