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

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.

Why you dont do focusedInput={props.focusedInput} and onFocusChange={props.onFocusChange} ? — Martin J
– Martin J, Commented Sep 1, 2020 at 12:30

Liu Lei · Accepted Answer · 2020-09-01 12:31:21Z

4

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

answered Sep 1, 2020 at 12:31

Liu Lei

1,2971 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related