How to use forwardRef in a render prop in react-hook-form v7

Viewed 578

I'm upgrading react-hook-form from version 6.x to 7.x and the instructions say to replace the Component as with a render prop.

That's all good for most of my styled components but for my DatePicker I need to pass in an inputRef for it to work.

The old code (working well under react-hook-form v6) is as follows

export const DatePicker = styled(
  ({ name, validation, label, control, value, onChange, disablePast, ...props }) => (
    <Row id={name} {...props}>
      <Controller
        as={forwardRef((_props, ref) => (
          <KeyboardDatePicker
            id={name}
            name={name}
            disableToolbar
            margin="dense"
            inputVariant="outlined"
            format="dd-MM-yyyy"
            label={label}
            value={value}
            onChange={onChange}
            autoOk
            inputRef={ref}
            disablePast={disablePast}
          />
        ))}
        name={name}
        control={control}
        rules={validation}
      />
    </Row>
  )
)(({ theme }) => ({
  padding: theme.spacing(0, 0, 1, 0)
}))

so replacing the as with a render prop looks like

export const DatePicker = styled(
  ({ name, validation, label, control, value, onChange, disablePast, ...props }) => (
    <Row id={name} {...props}>
      <Controller
        render={({ field }) =>
          forwardRef((_props, ref) => (
            <KeyboardDatePicker
              {...field}
              id={name}
              name={name}
              disableToolbar
              margin="dense"
              inputVariant="outlined"
              format="dd-MM-yyyy"
              label={label}
              value={value}
              onChange={onChange}
              autoOk
              inputRef={ref}
              disablePast={disablePast}
            />
          ))
        }
        name={name}
        control={control}
        rules={validation}
      />
    </Row>
  )
)(({ theme }) => ({
  padding: theme.spacing(0, 0, 1, 0)
}))

but this doesn't work and I get the error

Objects are not valid as a React child (found: object with keys {$$typeof, render})

The issue appears to be my use of forwardRef and, try as I might, I can't work out where or how to fix it.

0 Answers
Related