Warning: Function components cannot be given refs

Question

I'm using Next.js latest version for making my blog website, don't know why show me error, when I'm trying to make my form then show me error like this:

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

I'm tried below code:

import React, { useState } from "react";
import { APP_NAME } from "../config";
import Link from "next/link";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
} from "reactstrap";

const Header = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
      <Navbar color="light" light expand="md">
        <Link href="/">
          <NavbarBrand className="font-weight-bold">{APP_NAME}</NavbarBrand>
        </Link>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="m-auto" navbar>
            <NavItem>
              <Link href="/signup">
                <NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
              </Link>
            </NavItem>
            <NavItem>
              <Link href="/signin">
                <NavLink style={{ cursor: "pointer" }}>Signin</NavLink>
              </Link>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
};

export default Header;

please give me your valuable suggestion.

Answer 1

From the official documentation: if-the-child-is-a-function-component shows the right way when you wrap a custom function component within Link.

1. Add passHref attribute in Link.
2. Wrap your custom function component with React.forwardRef.

However, the NavbarBrand is not a component which you can manipulate. You can create a custom component to wrap NavbarBrand. It probably like

const CustomNavbarBrand = React.forwardRef(({ onClick, href }, ref) => {
  return (
    <NavbarBrand href={href} onClick={onClick} ref={ref}>
      Click Me
    </NavbarBrand>
  )
})

<Link href="/">
  <CustomNavbarBrand>{APP_NAME}</CustomNavbarBrand>
</Link>

Check the valid property which can be passed to NavbarBrand since I haven't use the reactstrap before.

Answer 2

The easiest solution may be to wrap your NavLink with a native html element. In your case:

<Link href="/signup" passHref>
  <a>
    <NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
  </a>
</Link>

Answer 3

This worked for me:

<Link href="/">
      <div className="navbar-brand">
        <a>{APP_NAME}</a>
      </div>
    </Link>

Instead of using the NavbarBrand component I just added the class navbar-brand

Answer 4

Wrapping the child component in an a (anchor) tag resolved my issue.

Steps to reproduce :

1. Wrap around a component with the Link tag from Next JS

import Link from 'next/link' import Image from 'next/image'

<Link href="/">
<Image  width="100%"
       height="100%"
       src="/logo.png"
       alt="Blitztech Electronics Logo" />
<Link>

Solution :

1. passing the 'important' passHref attribute

2. Wrapping the entire children in a a tag