I'm currently making a list of items in react-native using flatlist, the issue i'm facing is that its sharing my isloading prop between all instances of the items in the list. meaning that if i click on one item all items then show that it is loading. I've tried extraData and unique keys but im really unsure of what to do.
interface IBugListProps { onItemSelected: (bugListItem: BugModel) => void; onDeletePress: (bugListItem: BugModel, index: number) => void; refreshing: boolean; onRefresh: () => any; bugListItems: BugModel[]; isLoading: boolean;}const BugList = (props: IBugListProps) => { return (<FlatList data={props.bugListItems} refreshControl={<RefreshControl progressBackgroundColor={'#000000'} colors={['#00DA8B']} refreshing={props.refreshing} onRefresh={props.onRefresh} /> } extraData={props} keyExtractor={listItem => (listItem.id as number).toString()} renderItem={({ item, index, separators }) => (<Fragment><SwipeableItem index={index} rightText={'Delete'} onPressRight={() => props.onDeletePress(item, index)} isLoading={props.isLoading}><BugListItem key={item.id} bugListItem={item} onItemSelected={_item => props.onItemSelected(_item)} /></SwipeableItem></Fragment> )} /> );}export default BugList;The component that has the same props for all instances of this component
interface IListItemProps { isLoading?: boolean; index: number leftText?: string; onSwipeLeft?: () => void; onPressLeft?: () => void; rightText?: string; onSwipeRight?: () => void onPressRight?: () => void; children: React.ReactElement<any>;}const SwipeableItem = (props: IListItemProps) => { const isLeft: boolean = (props?.leftText !== undefined) || (props?.onSwipeLeft !== undefined) || (props?.onPressLeft !== undefined) const isRight: boolean = (props?.rightText !== undefined) || (props?.onSwipeRight !== undefined) || (props?.onSwipeRight !== undefined) console.log(props.index) return (<Fragment > {(isLeft && isRight) ? (<Swipeable renderLeftActions={(progress, dragX) => (<LeftActions isLoading={props?.isLoading!} progress={progress} dragX={dragX} onPress={props?.onPressLeft} text={props?.leftText!} /> )} onSwipeableLeftOpen={props?.onSwipeLeft} renderRightActions={(progress, dragX) => (<RightActions isLoading={props?.isLoading!} progress={progress} dragX={dragX} onPress={props?.onPressRight} text={props?.rightText!} /> )} onSwipeableRightOpen={props?.onSwipeRight}> {props.children}</Swipeable> ) : (<Fragment> {isLeft && (<Swipeable renderLeftActions={(progress, dragX) => (<LeftActions isLoading={props?.isLoading!} progress={progress} dragX={dragX} onPress={props?.onPressLeft} text={props?.leftText!} /> )} onSwipeableLeftOpen={props?.onSwipeLeft}> {props.children}</Swipeable> )} {isRight && (<Swipeable renderRightActions={(progress, dragX) => (<RightActions isLoading={props?.isLoading!} progress={progress} dragX={dragX} onPress={props?.onPressRight} text={props?.rightText!} /> )} onSwipeableRightOpen={props?.onSwipeRight}> {props.children}</Swipeable> )}</Fragment> )}</Fragment> )};export default SwipeableItem;