Kevin Powell - Community•12mo ago

React passing props to children within parent component + TypeScript

Let's say I have Select component that manages state for event onChangeOption when option is checked/unchecked. Option can be component SimpleOption or CheckboxOption. Select.tsx

interface Props {
children: ReactElement;
options: string[];
onChange: () => void;
}
export const Select = (props: Props) => {

const onChange = () => {};

const handleChangeOption = () => {};

return React.cloneElement(props.children, {
          checked: checkedOptions.includes(child.props.value),
          onChangeOption: handleChangeOption,
        });
}

interface Props {
children: ReactElement;
options: string[];
onChange: () => void;
}
export const Select = (props: Props) => {

const onChange = () => {};

const handleChangeOption = () => {};

return React.cloneElement(props.children, {
          checked: checkedOptions.includes(child.props.value),
          onChangeOption: handleChangeOption,
        });
}

SimpleOption.tsx

interface Props {
onChangeOption: () => void;
}
export const SimpleOption = (props: Props) {
return <p onChange={props.onChangeOption}></p>
}

interface Props {
onChangeOption: () => void;
}
export const SimpleOption = (props: Props) {
return <p onChange={props.onChangeOption}></p>
}

Page.tsx

const [categories, setCategories] = useState<string[]>(['shirts', 'shoes', 'trousers']);
return (
<Select onChange={e => setCategories(e)} options={categories}>
<SimpleOption onChangeOption={____ I don't want to repeat this (already passed in Select component ___} />
<SimpleOption onChangeOption={"like above"} />
</Select>
);

const [categories, setCategories] = useState<string[]>(['shirts', 'shoes', 'trousers']);
return (
<Select onChange={e => setCategories(e)} options={categories}>
<SimpleOption onChangeOption={____ I don't want to repeat this (already passed in Select component ___} />
<SimpleOption onChangeOption={"like above"} />
</Select>
);

Question On page.tsx, I have to specify onChangeOption for SimpleOption [or CheckboxOption]. How can I avoid it without making onChangeOption optional? (it's required and I don't want to cheat it).

1 Reply

Kuba Faraway•12mo ago

All help appreciated

Gaming

Programming

React passing props to children within parent component + TypeScript