# Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

**Code:** `refs on function components` · **Category:** React · **Seen on:** React

A ref was passed to a function component that doesn’t forward it.

## Meaning

Before React 19, function components need forwardRef to receive refs. Libraries (form libs, animation libs, tooltips) pass refs to your custom components.

## Common causes

- Custom input/button components used with refs
- Library wrapping your component and attaching a ref

## Quick fix

1. Wrap with React.forwardRef and pass the ref to a DOM element
2. React 19: accept ref as a normal prop

## Detailed fix by platform

### React

1. `const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);`

## How to diagnose

1. **Component** — Which one receives the ref?
2. **Version** — React 18 or 19?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/react/function-components-cannot-be-given-refs)