I have a list of options,I want to change counter color based on:
- if the selected option id equals current option id and the option quantity reached the max option Qty itself or Section options Qty.
The current behavior
I can't keep track of the unselected style in every option checked they changed,
ISSUE:Actually yes the id !== selectedOpt so will other counter box will be grey, but what i want is to keep it yellow if it's not reached the maximum
checkout this screen record to understand my points
code
const [selectedOpt, setSelectedOpt] = useState(); // current selected option- idconst renderLabel = (label, idOfExtra, maximum_options) => { const {name, price, price_unit, calories, id, maximum} = label; const markedItem = selectedMultipleExtra && selectedMultipleExtra.find(ii => ii.label.id === id); const currentSelectedOptionQty = selectedOptionsQty.find(opt => opt.id === id)?.qty || 1; const currentSelectedOptionId = selectedExtra.find(opt => opt.value === id); const totalSelectedOptionQty = selectedOptionsQty.reduce( (acc, curr) => acc + curr.qty, 0, ); let currentOptionId = selectedOptionsQty.find(opt => opt.id === id); return (<View style={styles.qtyBox}><TouchableOpacity activeOpacity={0.6} style={[ styles.plusQty, // the issue here... { backgroundColor: id === selectedOpt ? currentSelectedOptionQty === maximum || totalSelectedOptionQty === maximum_options ? 'grey' : buttonBgColor : 'grey', }, ]} onPress={() => { if ( totalSelectedOptionQty < maximum_options && currentSelectedOptionQty < maximum ) { console.log('selectedExtra', selectedExtra); handleIncreaseOptionQty(markedItem, maximum); console.log('currentSelectedOptionId', currentSelectedOptionId.value, ); console.log('currentOptionId?.max', currentOptionId?.max); console.log('id', id); // console.log('in-maximum_options', maximum_options); // console.log('checkIfMarked', checkIfMarked); // console.log('markedItem', markedItem); // console.log('checkIfMarked', checkIfMarked && markedItem); // console.log('in-maximum', maximum); } else { console.log('maximum reached'); // get the current selected item from selectedOptionsQty and put new property for reached maximum to true then update the state setSelectedOptionsQty(prev => { let _currentOptionId = prev.find( _item => _item.id === markedItem.label.id, ); if (_currentOptionId) { currentOptionId.max = true; } return [...prev]; }); console.log('currentOptionId?.max', currentOptionId?.max); setMaxOptions(maximum_options); actionSheetRef.current.show(); } }}><Plus width={13} height={13} /></TouchableOpacity><AppText style={[ styles.qtyLabel, { color: id === selectedOpt ? 'red' : 'blue', }, ]}> {markedItem && currentSelectedOptionQty != null ? currentSelectedOptionQty : null}</AppText><TouchableOpacity activeOpacity={0.6} style={[ styles.plusQty, { backgroundColor: currentSelectedOptionQty === 0 || currentSelectedOptionQty === 1 ? COLORS.sliver : buttonBgColor, }, ]} onPress={() => { if ( totalSelectedOptionQty > 1 && currentSelectedOptionQty > 1 ) { handleDecreaseOptionQty(markedItem, maximum); } }}><Minus width={10} height={10} /></TouchableOpacity></View> );}