如何使用 typescript 将道具从父母传递给孩子并做出反应？

Question

i want to pass props from parent to child using react and typescript. i am not sure how to add it to type.

below is my code,

function Parent () {
    return (
        <DateRangePicker
            onDatesChange={onDatesChange}
            focusedInput={focusedInput}
            onFocusChange={onFocusChange}
        />
    );
}

type Props = Omit<
    DayPickerRangeControllerShape,
    'numberOfMonths' | 'hideKeyboardShortcutsPanel' | 'noBorder'
>;

function DateRangePicker(props: Props) {
    return (
        <Wrapper>
            <DayPickerRangeController
                {...props}
                numberOfMonths={2}
                focusedInput={focusedInput} //this is not detected
                onFocusChange={onFocusChange} //this is not detected
            />
        </Wrapper>
    );
}

how can i add the focusedInput and onFocusChange props to type Props. right now it gives me error. cannot find name "focusedInput". cannot find name "onFocusChange"

could someone help me with this. thanks.

Answer 1

...
interface IProps {
  focusedInput: Function
  onFocusChange: Function
}

type Props = Omit<
    DayPickerRangeControllerShape,
    'numberOfMonths' | 'hideKeyboardShortcutsPanel' | 'noBorder'
> & IProps;

function DateRangePicker(props: Props) {
    const {focusedInput, onFocusChange} = props
    return (
        <Wrapper>
            <DayPickerRangeController
                {...props}
                numberOfMonths={2}
                focusedInput={focusedInput} //this is not detected
                onFocusChange={onFocusChange} //this is not detected
            />
        </Wrapper>
    );
}