Warning: Function components cannot be given refs

user_15306704 0
Viewed 20084

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()?

enter image description here

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.

next.js reactjs javascript
5 Answers

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>
user_57234390

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="/" passHref>
  <CustomNavbarBrand>{APP_NAME}</CustomNavbarBrand>
</Link>

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

user_100909270

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

user_153676920

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

user_154371550 
<Link href="/">
      <a>{APP_NAME}</a>
</Link>

this worked for me. just wrap it in anchor tag

user_186324560
Related