Having issue on adding "id" for each member in Flatlist (React Native)?

Question

Im having issue on adding "id" for each member. I am wanting to render each Member component, and when the user clicks on a specific member, navigate to a screen that has that Member's details on it. Pls help me out on solving out this issue as I'm quite new to react native.

MemberInput.js

import React from 'react';
import { FlatList, Text, TouchableOpacity, View } from 'react-native';
import { SearchContainer, SearchInput, SearchIcon, SearchIconContainer, MemberListImage} from './styles';
import { FontAwesome5 } from '@expo/vector-icons';
import {Member} from './Member';
import { useNavigation } from '@react-navigation/native';

const StaticMemberListImage = "https://media.istockphoto.com/vectors/three-people-curved-teamwork-logo-vector-id1363080708?b=1&k=20&m=1363080708&s=170667a&w=0&h=HG6M1JLupChxFQvl8mzUCLCkKWxNwa09RscKJRWTfoU="
    const StaticMemberListImage1 = "https://scontent.fkul13-1.fna.fbcdn.net/v/t39.30808-6/277536553_4926823574070611_1982637994984559070_n.jpg?stp=cp0_dst-jpg_e15_fr_q65&_nc_cat=110&ccb=1-6&_nc_sid=9e2e56&_nc_ohc=XepHa0zDLokAX_CGPxz&_nc_ht=scontent.fkul13-1.fna&oh=00_AT8-ajKxUdWkKKhfTMlGVZHnDDboXBTiXA1k-4uffh53FA&oe=628303D8"
    const StaticMemberListImage2 = "https://cdn3.f-cdn.com/contestentries/1771882/42695517/5ec3817a4257a_thumb900.jpg"
    const StaticMemberListImage3 = "https://scontent.fkul16-1.fna.fbcdn.net/v/t1.6435-9/116880515_187714399437397_6195609452015735631_n.jpg?_nc_cat=105&ccb=1-6&_nc_sid=09cbfe&_nc_ohc=SFOqJafY0qYAX83mUrQ&_nc_ht=scontent.fkul16-1.fna&oh=00_AT-aRCE81LEG-3iYA7bNPQA6ifu_4ObgAjqVooB4i0MSBg&oe=62A3D80D"
    const StaticMemberListImage4 = "https://scontent.fkul16-1.fna.fbcdn.net/v/t1.6435-9/175052927_271800581342609_273555569106690317_n.png?_nc_cat=104&ccb=1-6&_nc_sid=174925&_nc_ohc=18UXeZc859gAX_jrq4p&_nc_ht=scontent.fkul16-1.fna&oh=00_AT-p88uwdCZTnMPRQL4b6_y4CG2PFBEFiWUgkzKlArrfIw&oe=62A212F8"
    const StaticMemberListImage5 = "https://scontent.fkul13-1.fna.fbcdn.net/v/t39.30808-6/276260909_298231979107455_7181712052572521945_n.jpg?stp=cp0_dst-jpg_e15_fr_q65&_nc_cat=100&ccb=1-6&_nc_sid=9e2e56&_nc_ohc=xFvdoZ0pZiMAX9vrQ7b&_nc_ht=scontent.fkul13-1.fna&oh=00_AT9lNiryIc68GvPNDp7W11rRXhFj1y0H-oE0NYmniUknPQ&oe=6282AD36"

    const members = [
    { receipt: "Receipt pts: RM1 = 3.00pts", membername: "Triple R Rewards Resource" , memberImage: StaticMemberListImage, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 1.00pts", membername: "Gwen Bridal Makeup", memberImage: StaticMemberListImage1, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 1.00pts", membername: "KV Physiotheraphy", memberImage: StaticMemberListImage2, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 5.00pts", membername: "LDSV Ventura Enterprise", memberImage: StaticMemberListImage3, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 1.00pts", membername: "May Kuen Heals", memberImage: StaticMemberListImage4, receiptUpload: "Upload receipt"},
    { receipt: "Receipt pts: RM1 = 1.00pts", membername: "Amarjit Sran Trading", memberImage: StaticMemberListImage5, receiptUpload: "Upload receipt"},
];
export const MemberCell = () => {
    const navigation = useNavigation();
    return (
        <FlatList 
        numColumns={2}
        data={members}
        listKey={(item, index) => index.toString()}
        keyExtractor={(item, index) => index.toString()}
        renderItem={ ( { item } ) => (<Member member={item}
            onClick={()=> {
              navigation.navigate("MemberDetails");
            }} 
            onUploadClick={()=>{
              navigation.navigate("UploadReceipt")
            }}/>
          )}
        />
    );

}

Member.js

import React from 'react';
import { View, Text, Image } from 'react-native';
import {MemberListContainer, MemberListImage, MemberReceipt, MemberListName, MemberUploadReceipt, MemberUploadContainer, UploadIconContainer, UploadReceiptIcon, MemberNameAlign} from './styles';
import { FontAwesome5 } from '@expo/vector-icons';

export const Member = ({member, onClick, onUploadClick}) => {
        return (
            <MemberListContainer onPress={onClick}>
                <MemberListImage source={{uri: member.memberImage}} />
                <MemberReceipt>{member.receipt}</MemberReceipt>
                <MemberNameAlign>
                    <MemberListName>{member.membername}</MemberListName>
                </MemberNameAlign>
                <MemberUploadContainer>
                    <UploadIconContainer onPress={onUploadClick}>
                        <UploadReceiptIcon name="receipt"/>
                        <MemberUploadReceipt >{member.receiptUpload}</MemberUploadReceipt>
                    </UploadIconContainer>
                </MemberUploadContainer>
            </MemberListContainer>
        )

}

Answer 1

Here are some ideas:

1. Make sure you give each object of your members array its own unique id. FlatList needs a unique value to distinguish between the child items and to render correctly. You can do this my adding an 'id' key/value pair into each object. A quick work around would look like this:

const members = [
    { id: Math.random(), receipt: "Receipt pts: RM1 = 3.00pts", membername: "Triple R Rewards Resource" , memberImage: StaticMemberListImage, receiptUpload: "Upload receipt"},
    { id: Math.random(), receipt: "Receipt pts: RM1 = 1.00pts", membername: "Gwen Bridal Makeup", memberImage: StaticMemberListImage1, receiptUpload: "Upload receipt"},
    { id: Math.random(), receipt: "Receipt pts: RM1 = 1.00pts", membername: "KV Physiotheraphy", memberImage: StaticMemberListImage2, receiptUpload: "Upload receipt"},
    { id: Math.random(), receipt: "Receipt pts: RM1 = 5.00pts", membername: "LDSV Ventura Enterprise", memberImage: StaticMemberListImage3, receiptUpload: "Upload receipt"},
    { id: Math.random(), receipt: "Receipt pts: RM1 = 1.00pts", membername: "May Kuen Heals", memberImage: StaticMemberListImage4, receiptUpload: "Upload receipt"},
    { id: Math.random(), receipt: "Receipt pts: RM1 = 1.00pts", membername: "Amarjit Sran Trading", memberImage: StaticMemberListImage5, receiptUpload: "Upload receipt"},
    ]

2. Change your keyExtractor prop in your flatlist so you are only pulling each item id of your data structure. This would look something like this:

keyExtractor={(item) => `${item.id}`}

3. You may be able to delete the listKey prop.

4. The most important thing in passing values in react-native from screen to screen is including a data object in your navigation route. You need to specify what data should be passed to what specific screen. This would make your MemberCell component look something like this:

export const MemberCell = ({ navigation}) => {

    return (
        <FlatList 
        numColumns={2}
        data={members}
        keyExtractor={(item) => `${item.id}`}
        renderItem={({ item }) => (
        <Member 
            member={item}
            onClick={()=> {
              navigation.navigate("MemberDetails", {memberData: item});
            }} 
            onUploadClick={()=>{
              navigation.navigate("UploadReceipt", {receiptData:item.receipt})
            }}/>
          )}
        />
    );
}

You can read more about passing data to specific routes here.