why it is not working to remove if it the same color name?-CodePudding

I have a problem

My currentColor goes not to null, If I Press a color I set the color to currentColor, if the same color is again pressed then I remove the color (I set currentColor to null). but its not working

const ModalProductSizeColor = forwardRef<BottomSheetModal, IModalProductSizeColor>(({ onPress }, ref) => {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParams>>();

  const [currentColor, setCurrentColor] = useState<ColorsOptions | null>(null);
  const [sizeScreen, setSizeScreen] = useState<boolean>(false);

  const snapPoints = useMemo(() => ['25%', 250], []);

  const handleSetCurrentColor = (color: ColorsOptions) => {
    console.log(currentColor   'current in func');
    currentColor === color ? setCurrentColor(null)  : setCurrentColor(color)
  };

  console.log(currentColor);
  return (
    <BottomSheetModal
      ref={ref}         
      index={1}
      snapPoints={snapPoints}
      handleIndicatorStyle={[s.handleStyle, s.handleColorWhite]}
      backdropComponent={BottomSheetBackdrop}
    >
      <Text style={s.title}>test</Text>

        <Colors
          colors={ColorsData}
          onPress={handleSetCurrentColor}
          onLongPress={(x) => console.log(x)}
          containerStyle={s.containerStyle}
        />
      
      <View style={s.btnContainer}>
        <Pressable style={ButtonStyles.full}>
          <Text style={s.btnText}>Fertig</Text>
        </Pressable>
      </View>
    </BottomSheetModal>
  )
});

In my function when I console.log currentColor its null but outside of the function it is setted , I dont check anything anymore I am very thankful for your help

CodePudding user response：

Assuming your Colors component passes the color to your handleSetCurrentColor, you could try to set your currentColor like this

...
console.log(currentColor   'current in func');
setCurrentColor(prevCurrentColor => prevCurrentColor === color ? null : color)
...