Remove item once while exist - arrays

I'm trying to hide selected item while it's exist in compared Array, but for some reason when I have two Strings that are same on array it's hiding both items, any solution for that?
Array example:
["I'm", "going", "to", "go" ,"to", "London"]
/Get selected value
const handleSelected = (e) => {
setReceivedItems(e);
};
//Update selected data at first render
useEffect(() => {
setNewItems((newItem) => [...newItem, receivedItems]);
}, [receivedItems]);
const deleteWord = (receivedItem) => {
setNewItems((data) => data.filter((item) => item !== receivedItem));
};
Return (
<View
style={{
...
}}
key={i}
>
{enItems.enWordR?.map((enWordR, i) => (
<TouchableOpacity
key={i}
onPress={handleSelected.bind(this, enWordR)}
style={[
newItems.find((item) => item === enWordR) <---- item get hidden with this method
? styles.hideItem
: styles.showItem,
]}
>
<Button
title={enWordR}
/>
</TouchableOpacity>
))}
</View>
>
)
So, in above example both "to" will be hidden

Related

How to prevent component from re-rendering , react native

So into the cartscreen, I am importing a dropdown component.
Now, there is a different dropdown inside the cartscreen called renderDropdown, and I'm using it to display two different data lists as two dropdowns for the user to choose from. Although this renderDropdown is functioning properly, selecting an imported dropdown causes the selected value in my renderDropdown to be cleared from the dropdown bar.
I verified that renderDropdown's value remains in the current state and I noticed that when I click on this imported drop-down, I get a message printed to the console(I have added console.log in cart screen whenever screen renders), which indicates that my entire screen is rendering. Could someone please look into this and let me know what's wrong?
Here is the code for a dropdown menu.
[I've also used the same component in a lot of other screens, and it works just fine]
import { StyleSheet, View } from 'react-native'
import React from 'react'
import { Dropdown} from 'react-native-element-dropdown'
import { COLORS } from '../constants'
const DropdownComponent = ({text, extractorValue, external_Id, data:mainData, extraData, value, setValue, isFocus, setIsFocus,area=false, retailer=false, retailerC=false, extraStyling}) => {
return (
<View style={[styles.container, {...extraStyling}]}>
<Dropdown
style={[styles.dropdown, isFocus && { borderColor: COLORS.blue90 }]}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
data={mainData}
containerStyle={{
backgroundColor:COLORS.white10,
borderRadius:10,
marginTop:10,
borderColor:COLORS.gray10,
shadowColor:COLORS.blue90,
shadowOffset:{
height:15,
width: 15
},
elevation:19,
}}
search
maxHeight={300}
labelField={extractorValue ? extractorValue :"name"}
valueField={external_Id ? external_Id :"name"}
placeholder={!isFocus ? `Select ${text ? text : 'Item'}` : '...'}
searchPlaceholder="Search..."
value={value}
onFocus={() => setIsFocus(true)}
onBlur={() => setIsFocus(false)}
onChange={item => {
retailer ?
retailerC ?
(
setValue({...extraData, retailerClass:external_Id ? item[external_Id] : item.name})
):
(
( area ?
setValue({...extraData, area:external_Id ? item[external_Id] : item.name})
:
setValue({...extraData, route:external_Id ? item[external_Id] : item.name})
)
)
:
(
setValue(external_Id ? item[external_Id] : item.name)
)
setIsFocus(false)
}}
/>
</View>
)
}
export default DropdownComponent
and here is the cartScreen code which is causing trouble , also i want to include that i have to show 3 dropdowns on the screen so i was using the same component renderDropdown for all of them but i was having the same issue so i though it is because of third dropwdown (namely value scheme ) so i used external one but having the same issue.
const CartDetailsScreen = ({navigation}) => {
const [loading, setLoading] = React.useState(false)
const {cartItems, setCartItems } = useContext(mapContext)
const { createOrders, createOrderStatus, distributors, setDistributors, getDistributors, schemes, setSchemes, getSchemes} = useContext(commonUrlsContext)
useLayoutEffect(()=>{
navigation.setOptions({
headerShown:true,
headerTitle:'CART DETAILS',
...HeaderStyles,
headerLeft: () =>(
<HeaderLeft navigation={navigation} />
)
})
},[])
const [valueSchemeFromDropDown, setValueSchemeFromDropDown] = React.useState('')
React.useEffect(()=>{
getSchemes()
getDistributors()
return () =>{
setDistributors([])
setSchemes([])
}
},[])
React.useEffect(()=>{
if(createOrderStatus){
ToastAndroid.show('Order created successfully', ToastAndroid.CENTER)
navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{ name: 'OrderSuccessful' },
],
})
);
setTimeout(()=>{{navigation.navigate('OrderSuccessful'), setCartItems([])}},1000)
}
},[createOrderStatus])
function RenderDropDown({index, text, data, external_Id, extractorValue, width, qtyScheme, valueScheme}){
return(
<View style={[styles.container, width && {width: width}]}>
<Dropdown
style={[styles.dropdown]}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
inputSearchStyle={styles.inputSearchStyle}
iconStyle={styles.iconStyle}
data={data}
containerStyle={{
borderRadius:10,
marginTop:10,
borderColor:COLORS.gray10,
shadowColor:COLORS.gray90,
shadowOffset:{
height:10,
width: 10
},
elevation:15,
}}
search
maxHeight={300}
labelField={extractorValue ? extractorValue :"name"}
valueField={external_Id ? external_Id :"name"}
placeholder={`Select ${text ? text : 'item'}`}
searchPlaceholder="Search..."
// value={qtyScheme ? cartItems[index]?.distributorName}
onChange={item => {
qtyScheme ?
(
console.log(1),
cartItems[index].qtyScheme = item[external_Id],
setCartItems(cartItems)
)
:
(
console.log(2),
cartItems[index].distributorName = item[extractorValue],
cartItems[index].distributorId = item[external_Id],
setCartItems(cartItems)
)
}}
/>
</View>
)
}
const removeFromCart = (id) =>{
let updatedCart = cartItems.filter(product => product?.products?.Id !== id)
setCartItems(updatedCart)
ToastAndroid.show('Item Removed From the Cart.', ToastAndroid.SHORT)
if(updatedCart.length === 0){
navigation.goBack()
}
}
const submitHandler = () =>{
setLoading(true)
createOrders(cartItems, valueSchemeFromDropDown)
}
const reduceHandler = (item, index) =>{
if(item.qty === 1){
let newResults = cartItems.filter(product => product.products.Id !== item.products.Id)
setCartItems(newResults)
if(newResults.length === 0){
navigation.goBack()
}
}
else{
item.qty = item.qty - 1
let newResults = cartItems.filter(product => product.products.Id !== item.products.Id ? product : item)
setCartItems(newResults)
}
}
const [testValue, setTestValue] = React.useState('')
const [testFocus, setTestFocus] = React.useState(false)
const incrementHandler = (item, index) =>{
let newResults = cartItems.map(product =>
product.products.Id === item.products.Id ? {...item, qty: product.qty + 1} : product)
setCartItems(newResults)
}
return (
<>
{ loading ?
<RowCenter style={{flex:1, flexDirection: 'column', alignItems:'center'}}>
<StyledText fontSize={'20px'}>{createOrderStatus ? 'Redirecting..' : 'Loading..'}</StyledText>
</RowCenter> :
<>
<View style={{flex:0.8}}>
<ScrollView showsVerticalScrollIndicator={false}>
{cartItems?.map((item, index)=>{
return(
<View key={item?.products?.Id} style={{flexDirection:'row', padding:13, borderRadius:10, margin:10, alignItems:'center', backgroundColor:COLORS.green20, ...customShadow }}>
<View style={{width:'100%'}}>
<StyledText>Product Name : {item?.products?.Name}</StyledText>
<ExtraSpace />
{item?.products?.Description &&
<StyledText>Product Description : {item?.products?.Description?.length > 30 ? item?.products?.Description?.slice(0,30) + '...': item?.products?.Description }</StyledText>
}
<ExtraSpace />
<View style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', padding:10}}>
<TouchableOpacity onPress={()=>removeFromCart(item?.products?.Id)} style={{flexDirection:'row', justifyContent:'center', alignItems:'center'}}>
<SimpleLineIcons name="trash" size={15} color={COLORS.error} />
<StyledText color={COLORS.error}>Remove</StyledText>
</TouchableOpacity>
<View style={{width:'40%', flexDirection:'row', justifyContent:'space-between', alignItems:'center',}}>
<TouchableOpacity onPress={()=>reduceHandler(item, index)}>
<Feather name="minus-circle" size={22} color={COLORS.gray90} />
</TouchableOpacity>
<StyledText>Qty : {item?.qty}</StyledText>
<TouchableOpacity onPress={()=>incrementHandler(item, index)} >
<Feather name="plus-circle" size={22} color={COLORS.gray90} />
</TouchableOpacity>
</View>
</View>
<RenderDropDown index={index} text={'Distributor'} data={distributors?.response} external_Id='external_Id' extractorValue='name' />
{item.distributorName &&
<Label color={'#131821'}> Clone Selected : {item.distributorName}</Label>
}
<RenderDropDown id={item?.products?.id} index={index} text={'Quantity Scheme'} data={schemes?.response?.filter(scheme => scheme.Type__c === 'Quantity Scheme')} external_Id='Id' extractorValue='Name' qtyScheme={true}/>
</View>
</View>
)
})}
</ScrollView>
</View>
<View style={{flex:0.2, justifyContent:'center', alignItems:'center', borderWidth:1, borderTopLeftRadius:10, borderTopRightRadius:10, marginBottom:2, marginHorizontal:1, borderTopColor:'gray', backgroundColor:"transparent"}}>
<DropdownComponent text={'Value Scheme'} data={schemes?.response?.filter(scheme => scheme.Type__c === 'Value Scheme')} external_Id='Id' extractorValue={'Name'} value={testValue} setValue={setTestValue} isFocus={testFocus} setIsFocus={setTestFocus} extraStyling={{width: '100%', marginTop:10, marginBottom:1}}/>
{/* <RenderDropDown text={'Value Scheme'} data={valueScheme} external_Id='Id' extractorValue='Name' valueScheme={true}/> */}
<TextButton onPress={()=>{cartItems?.length === 0 ? null : submitHandler()}} componentStyling={{width:'94%', padding:8, marginHorizontal:10, marginBottom:10, marginTop:1}} title='Place Order'/>
</View>
</>
}
</>
)
}
Hey you have added these
onFocus={() => setIsFocus(true)}
onBlur={() => setIsFocus(false)}
and these are setStates , so it will re render when dropdwon opens or closes
Hope it helps. feel free for doubts

check multiple list with icon in react native

I have a component which lists items with checkbox, I would like to check /uncheck with
clicked, but couldn't remove a duplicate item and the checkbox doesn't work. Any help would be appreciated
Checkbox.tsx
<TouchableOpacity
onPress={onPress} >
{selected && <Icon size={iconSize} color={color} name={'check'} />}
</TouchableOpacity>
App.tsx
{data.map((item, index) => (
<View}>
<CheckBox
boxSize={Layout.baseUnit * 6}
iconSize={Layout.baseUnit * 4}
color={Color.Dark}
selected={false}
onPress={() => {
handleSelected(item, index)
}}
/>
</View>
const handleSelected = (listItem: any, index: number) => {
newUpdatedList.push({
addedItem: listItem,
checked: true,
});
if (newUpdatedList.length > 0) {
newUpdatedList.findIndex(element => {
return element.addedItem === listItem;
}) !== -1;
}
const test = newUpdatedList.filter(element => {
return element.addedItem.toLowerCase() !== listItem.toLowerCase();
});
setNewUpdatedList([...test]);
};

How to change color of specific item in FlatList

const [itemsPressed, setItemsPressed] = useState(true);
const changeColor = (x) => {
setItemsPressed(x)
}
If your item has some unique identifying ID/name, you can use that to help you track which one is pressed. (You could also just store the full item itself and do object equality but just a simple id/string is more than enough)
const [pressedItemIds, setPressedItems] = useState({});
const changeColor = useCallback((item) => {
setPressedItemIds({...pressedItemIds, [item.id]: true});
}, []);
<FlatList data={data}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={() => changeColor(item)}>
<View
style={backgroundColor: pressedItemIds.hasOwnProperty(item.id) ? '#8b0000': '#ffc6c4'}>
<Text>{data.text}</Text>
</View>
</TouchableWithoutFeedback>
)} />

How to scroll to a particular location initially on the basis of id?

I am using scrollTo to let scrollview element scroll to a particular id as follows:
let scrollviewRef = useRef();
useEffect(() => {
selectedid && selectedid!=null && selectedid!=undefined &&
scrollviewRef.current?.scrollTo({
y:selectedid,
animated:true,
})
getData();
BackHandler.addEventListener('hardwareBackPress', handleBackButtonOnnclick);
return () => {
BackHandler.removeEventListener(
'hardwareBackPress',
handleBackButtonOnnclick,
);
};
}, [changedstatus]);
<ScrollView ref={scrollviewRef}>
{data != '' &&
data !== undefined &&
data !== null &&
data.map((item) => {
const selected = item.vaccine_list
.map((a) => a.vaccineInternalId)
.includes(selectedid);
return (
<TouchableOpacity
key={item.id}
style={{
paddingLeft: 10,
paddingRight: 10,
}}
onPress={() => handleOnPress(item.id, item)}>
{expand[item.id] ? (
<ExpandedVaccineComponent
item={item}
id={id}
navigation={navigation}
changevaccinestatus={changevaccinestatus}
childdob={childdob}
/>
) : (
<NotExpandedVaccineComponent item={item} />
)}
</TouchableOpacity>
);
})}
</ScrollView>
But when I execute this, it is not initially scrolling to the selectedid, could anyone tell me what have I missed out here?
Any leads would be great.
Let me know if anything else is required for better clarity.

React native looping through array

I have array of colors that is being rendered with a flatlist. The flatlist data is coming from remote url. The colors are hardcoded in the app. The issue is that I am having is that the json data that is coming from api contain more rows of data than the colors I have in a array which result in only 5 items showing. Can someone help me with allowing the colors to repeat (make the index of colors repeat over and over)
componentDidMount() {
fetch('https://reactnative.dev/movies.json')
.then((response) => response.json())
.then((json) => {
this.setState({data: json.movies});
})
.catch((error) => console.error(error))
.finally(() => {
this.setState({isLoading: false});
});
}
render() {
const Colors = ['#1abc9c', '#9b59b6', '#7b59f9'];
const {data, isLoading} = this.state;
return (
<SafeAreaView style={{flex: 1, padding: 24}}>
{isLoading ? (
<ActivityIndicator />
) : (
<FlatGrid
itemDimension={130}
data={data}
style={styles.gridView}
keyExtractor={({id}, index) => id}
// staticDimension={300}
// fixed
spacing={10}
renderItem={({item, index}) => (
<View
style={[
styles.itemContainer,
{backgroundColor: Colors[index]},
]}>
<Text style={{color: 'white'}}>{item.title}</Text>
<Text style={{color: 'white'}}>{item.releaseYear}</Text>
</View>
)}
/>
)}
</SafeAreaView>
Simply use a modulo: {backgroundColor: Colors[index % Colors.length]}
const Colors = ["#1abc9c", "#9b59b6", "#7b59f9"];
for (let i = 0; i < 10; i++) {
console.log(Colors[i % Colors.length]);
}

Resources