CODEWITHSUNDEEP
javascriptreactjsnext.js
Mikel
Mikel

Reputation: 443

Warning: Function components cannot be given refs

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.

Upvotes: 42

Views: 42676

Answers (7)

Satnam Sandhu
Satnam Sandhu

Reputation: 1

Just Wrap it in anchor tag. it will work fine.

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

Upvotes: -3

Bathila Sanvidu
Bathila Sanvidu

Reputation: 121

Solution :

  1. Wrapp with anchor tag (a tag)

  2. use passHref attribute

<Link href='/' passHref>
  <a>
    <Image src='logo.png' width="50px" height="50px" />
  </a>
</Link>

Upvotes: 8

Santosh
Santosh

Reputation: 227

There is a better way to solve this issue: whenever you are going to add a child tag under Link tag, such as an Image tag, just wrap them under a div or a tag. Here is the example:

  <Link href="/">
              <div>
                <Image
                  src={Logo}
                  alt={TagName.COMPANY_NAME}
                  width={80}
                  height={80}
                  onClick={handleClicked}
                />
              </div>
   </Link>

Upvotes: 1

bcjohn
bcjohn

Reputation: 2523

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.

Upvotes: 30

Think Digital
Think Digital

Reputation: 147

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

Upvotes: 2

alexsabdev
alexsabdev

Reputation: 571

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>

Upvotes: 46

user15367692
user15367692

Reputation:

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

Upvotes: 5

Related Questions