Making a list of checkbox components React Native with map()-CodePudding

I need to make checkbox list component. I am importing Checkbox component from another file and accesing it in my Option function. What is the correct way to map through my Option function and display a list of the Checkbox component? Currently my List is not working i get some errors: Cannot find name 'value'. Property 'disabled' and 'checked' does not exist on type 'Option'. "Type '{ checked: boolean; key: string; label: string; disabled: any; onPress: () => void; }' is not assignable to type 'IntrinsicAttributes & OptionProps'. Property 'checked' does not exist on type 'IntrinsicAttributes & OptionProps'."

type CheckboxListProps = {
    label?: string;
    options: Option[];
    checkedValues: string[];
    onChange: (value: string, checked: boolean) => void;
    disabled?: boolean;
};

export function CheckboxList({ label, options, checkedValues, onChange, disabled, style }: CheckboxListProps) {
    return (
        <View>
            <View style={styles.container}>
                {options.map((option) => (
                    <Option
                        checked={option.value === value}
                        key={option.value}
                        label={option.label}
                        disabled={disabled || option.disabled}
                        onPress={() => onChange(option.value, option.checked)}
                    />
                ))}
            </View>
        </View>
    );
}

type OptionProps = {
    disabled?: boolean;
    label: string;
};

function Option({ label, disabled }: OptionProps) {
    const [checkboxChecked, setCheckboxChecked] = React.useState(false);
    return (
        <Checkbox
            onPress={() => {
                setCheckboxChecked((checked) => !checked);
            }}
            label={label}
            checked={checkboxChecked}
            disabled={disabled}
        />
  );
    }

app.tsx file

export default function App() {
    const [checkedValue, setCheckedValue] = React.useState("value");

  <CheckboxList
                options={[
                    { label: "label", value: "value" },
                    { label: "label", value: "value2" },
                ]}
                value={checkedValue}
                onChange={setCheckedValue}
            />

My checkbox component

<Pressable
            style={{ opacity: disabled ? 0.3 : 1 }}
            onPress={onPress}
            disabled={disabled}
            >
            <View style={[styles.box, checked && styles.checked]}>
                {checked ? <Icon name="tick" /> : null}
            </View>
            <Text>{label}</Text>
        </Pressable>

CodePudding user response：

Hi you have Type clash:

type CheckboxListProps = {
    ...
    options: Option[];
};

and

function Option({ label, disabled }: OptionProps)

and

<Option/>

not going to work together since you define

options={[{ label: "label", value: "value" },{ label: "label", value: "value2" },]}

In your case you have to rename function Option or Type Option

the quick fix would be:

type CheckboxListProps = {
    ...
    options:[{ label: string; value: string }];
    ...
};

update

one more:

<Option
   checked={option.value === value}
   key={option.value}
   label={option.label}
   disabled={disabled || option.disabled}
   onPress={() => onChange(option.value, option.checked)}
/>

type OptionProps = {
    disabled?: boolean;
    label: string;
};

type doesn't have checked and onPress sholud be:

type OptionProps = {
    disabled?: boolean;
    label: string;
    checked: boolean;
    onPress: () => void; 
};

notice onPress should be onPress: (e:eTypeHere) => void;

update more:

onChange: (value: string, checked: boolean) => void;

is not going to match: const [checkedValue, setCheckedValue] = React.useState("value"); and

onPress={() => onChange(option.value, option.checked)}

would not work

add

type CheckboxListProps = {
   ...
   value: string;
   onChange: (value: string) => void;
   ...
}

change

<Option onPress={() => onChange(option.value)}/>