Error with forwardRef and ui-fabric component

Question

I get an error when I use forwardRef and the DatePicker component of office-ui-fabric. I am trying to create a functional component and return the reference to the fabric component. My code is as follows:

import React, { forwardRef } from "react";
import styled from "styled-components";
import { DatePicker, IDatePicker, IRefObject } from "office-ui-fabric-react";

interface IProps extends IDatePicker {
    label?: string;
    error?: string;
}

export const Date = forwardRef<IRefObject<IDatePicker>, IProps>(({ ...props }, ref) => {

    return <DateStyled>

        <DatePicker componentRef={ref} />

    </DateStyled>
});

const DateStyled = styled.div``;

The error I get is on the line

<DatePicker componentRef={ref} />

And it says the following

Type '((instance: React.RefObject<IDatePicker> | RefObject<...> | ((ref: IDatePicker | null) => void) | null) => void) | MutableRefObject<...> | null' is not assignable to type 'React.RefObject<IDatePicker> | RefObject<...> | ((ref: IDatePicker | null) => void) | undefined'.
  Type 'null' is not assignable to type 'React.RefObject<IDatePicker> | RefObject<...> | ((ref: IDatePicker | null) => void) | undefined'.ts(2322)
DatePicker.types.d.ts(26, 5): The expected type comes from property 'componentRef' which is declared here on type 'IntrinsicAttributes & IDatePickerProps & { children?: ReactNode; }'

Could you help me figure it out. Thank you very much

score 0 · Answer 1 · answered Jun 24 '20 at 15:28

Well I think I have found the solution. I share it for those who have the same problem.

import React, { forwardRef } from "react";
import styled from "styled-components";
import { DatePicker, IDatePicker, IDatePickerProps } from "office-ui-fabric-react";

interface IProps extends IDatePickerProps {
    label?: string;
    error?: string;
}


export const Date = forwardRef<IDatePicker, IProps>(({ ...props }, ref) => {


    return <DateStyled>

        <DatePicker  {...props} componentRef={ref || undefined} />

    </DateStyled>
});

const DateStyled = styled.div``;

Error with forwardRef and ui-fabric component

1 Answers1