CODEWITHSUNDEEP
reactjstypescript
saritha
saritha

Reputation: 659

How to pass props from parent to child using typescript and react?

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.

Upvotes: 0

Views: 304

Answers (1)

Liu Lei
Liu Lei

Reputation: 1297

...
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>
    );
}

Upvotes: 4

Related Questions