Argument of type '(value: any) => any[]' is not assignable to parameter of type 's-CodePudding

I am trying to push a value to a state array but unable to as getting a TS error. I will put here the relevant components where the error can be seen. The error is on the child component, more specifically in the handleValue(value => [...value, item.value]).

Error:

Argument of type '(value: any) => any[]' is not assignable to parameter of type 'string[]

Parent component:

const ChooseValuesScreen: React.FC<Props> = ({ navigation}) => {
  const [value, setValue] = useState<string[]>([]);
  const [valuesProgress, setValuesProgress] = useState<number>(0);
  const [convertPercentageIntoUnit, setUnit] = useState<number>(0)
  const [numberOfValuesSelected, setNumberOfValuesSelected] = useState<number>(0);
    useLayoutEffect(() => {
        navigation.setOptions({
            headerShown: false,
        })
        setUnit(valuesProgress ? 1 : 0)
        setNumberOfValuesSelected(numberOfValuesSelected   convertPercentageIntoUnit)
    }, [navigation,valuesProgress, convertPercentageIntoUnit, value])  

    const renderItem: ListRenderItem<ItemProps> = ({item}) => <Item handleProgress{setValuesProgress} valuesProgress={valuesProgress} handleValue={setValue} data={item} />;

    return (
      <SafeAreaView style={[tw`bg-black h-full`,{}]}>
            <FlatList 
            data={values}
            keyExtractor={(item: ItemProps) => item.id}
            renderItem={renderItem}
            style={[tw``,{}]}
            showsVerticalScrollIndicator ={false}
            showsHorizontalScrollIndicator={false}
            numColumns={3}
            columnWrapperStyle={{ flex: 1, justifyContent: "center"}}
            />
        </SafeAreaView>
    )
}

export default ChooseValuesScreen;

Child component:

export type Props = {
    item: any,
    colorOnPress: string,
    pickedActiveOpacity: number,
    handleProgress: (valuesProgress : number) => void;
    valuesProgress: number,
    handleValue: (value : string[]) => void;
  };

const CustomButton: React.FC<Props> = ({ item ,pickedActiveOpacity, colorOnPress, handleProgress, valuesProgress, handleValue }) => {
    return (
            <View>
                <TouchableHighlight 
                onPress={() => {
                    if(valuesProgress < 1){
                        handleProgress(valuesProgress 0.2)
                        handleValue(value => [...value, item.value])
                    }}}>
                    <Text style={[tw`text-black text-right m-auto`,{fontFamily:'Poppins'}]}>{item.value}</Text>
                </TouchableHighlight>
            </View>
    )
}
export default CustomButton;

If I were to pass a value only handleValue(item.value), no error is seen and the state array will receive the value but what I want is for the values to remain in the array and not have a value replace the other. Any ideas?

CodePudding user response：

I ended up resolving it by changing the function type declaration to: handleValue((value:any) => [...value, item.value])in the child component and props being handleValue: (value:any) => void;

I am sure there is a better way to do this so if anyone has a better solution let me know

CodePudding user response：

In your props you declared handleValue: (value : string[]) => void; that means your function take one argument value as array of strings

In here handleValue(value => [...value, item.value]) you pass a function as agrument instead of string[]

UPD.

type CustomFunction = (value: string) => string[]
...
// In your Props
handleValue: (CustomFunction) => void