How to fix forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter? in React

// ❌ Wrong - only one parameter
const MyComponent = forwardRef((props) => {
  return <input {...props} />;
});

// ❌ Wrong - three or more parameters
const MyComponent = forwardRef((props, ref, extra) => {
  return <input {...props} ref={ref} />;
});

// ✅ Correct - exactly two parameters
const MyComponent = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

// ❌ Wrong - ref is missing
const Input = forwardRef(({ value, onChange }) => {
  return <input value={value} onChange={onChange} />;
});

// ✅ Correct - props destructured, ref declared separately
const Input = forwardRef(({ value, onChange }, ref) => {
  return <input value={value} onChange={onChange} ref={ref} />;
});

const TextInput = forwardRef((props, ref) => {
  return (
    <div className="input-wrapper">
      <input ref={ref} {...props} />
    </div>
  );
});

// Usage in parent component
function ParentComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current?.focus(); // Now works correctly
  }, []);

  return <TextInput ref={inputRef} placeholder="Type here" />;
}

import { forwardRef, InputHTMLAttributes } from 'react';

// Define props type
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
}

// ✅ Correct TypeScript usage
const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, ...props }, ref) => {
    return (
      <div>
        {label && <label>{label}</label>}
        <input ref={ref} {...props} />
      </div>
    );
  }
);

Input.displayName = 'Input';

// If you added forwardRef but don't use the ref...
const Button = forwardRef((props, ref) => {
  // ref is never used here
  return <button {...props}>{props.children}</button>;
});

// Consider just using a regular component instead
const Button = (props) => {
  return <button {...props}>{props.children}</button>;
};

import { forwardRef, useImperativeHandle, useRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    clear: () => {
      if (inputRef.current) {
        inputRef.current.value = '';
      }
    }
  }));

  return <input ref={inputRef} {...props} />;
});

CustomInput.displayName = 'CustomInput';

const MyComponent = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// This helps identify the component in DevTools
MyComponent.displayName = 'MyComponent';

// Without displayName, DevTools shows "ForwardRef(Anonymous)"
// With displayName, DevTools shows "ForwardRef(MyComponent)"