Property 'onClick' does not exist on type '{ children?: ReactNode; }'

user_14136079 0
Viewed 3462

I can't seem to find what I'm doing wrong... Any help will be appreciated:

type Props = {
  onClick: () => void, 
  value: string
}

const CustomInput = forwardRef<Props>(({ onClick, value }, ref) => (
  <div className="react-datepicker-custom-input" onClick={onClick}>
    {value}
    <i className={classes.arrowDown}></i>
  </div>
));


error message: Property 'onClick' does not exist on type '{ children?: ReactNode; }

export default CustomInput;

react-typescript typescript reactjs
3 Answers

Props generic should go as a second argument, not the first.

Example:

type Props = {
  onClick: () => void, 
  value: string
}

type RefType=number
const CustomInput = forwardRef<RefType, Props>(({ onClick, value }, ref) => (
  <div className="react-datepicker-custom-input" onClick={onClick}>
    {value}
    <i className={classes.arrowDown}></i>
  </div>
));

First generic argument of forwardRef is for ref type, second - if for props accordingly

user_84952540

You can type by adding it this way:

type Props = {
  onClick: () => void, 
  value: string
}

const CustomInput = forwardRef<Props>(({ onClick, value }:Props, ref:any) => (
  <div className="react-datepicker-custom-input" onClick={onClick}>
    {value}
    <i className={classes.arrowDown}></i>
  </div>
));
user_112019960

Try this

interface Props {
      children: ReactNode;
      onClick: () => void;
      value: string;
    }

const CustomInput = forwardRef(({ onClick, value }:Props) => (
  <div className="react-datepicker-custom-input" onClick={onClick}>
    {value}
    <i className={classes.arrowDown}></i>
  </div>
));

user_28243740
Related