CODEWITHSUNDEEP
javascriptreactjs
Jones Smith
Jones Smith

Reputation: 380

Attempts to access this ref will fail. Did you mean to use React.forwardRef()

I was working on my React form and I have the following codes:

import { useState } from "react";

const SignupComponent = () => {
  const [values, setValues] = useState({
    name: "",
    email: "",
    password: "",
    error: "",
    loading: false,
    message: "",
    showForm: true,
  });

  const { name, email, password, error, loading, message, showForm } = values;

  const handleSubmit = (e) => {
    e.preventDefault();
    console.table({ name, email, password, error, loading, message, showForm });
  };

  const handleChange = (name) => (e) => {
    setValues({ ...values, error: false, [name]: e.target.value });
  };

  const signupForm = () => {
    return (
      <form onSubmit={handleSubmit}>
        <div className="form-group mt-3">
          <input
            onChange={handleChange("name")}
            type="text"
            className="form-control"
            placeholder="Type your name"
            value={name}
          />
        </div>

        <div className="form-group mt-3">
          <input
            onChange={handleChange("email")}
            type="email"
            className="form-control"
            placeholder="Type your email"
            value={email}
          />
        </div>

        <div className="form-group mt-3">
          <input
            onChange={handleChange("password")}
            type="password"
            className="form-control"
            placeholder="Type your password"
            value={password}
          />
        </div>

        <div className="form-group mt-3">
          <div className="btn btn-primary">Signup</div>
        </div>
      </form>
    );
  };

  return <>{signupForm()}</>;
};

export default SignupComponent;

When I visit my form, and fill up the fields it should actually console.log the values of name, email etc.. However, it returend the following errors:

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

Check the render method of `Link`.
    at NavbarBrand (http://localhost:3000/_next/static/chunks/pages/signup.js?ts=1620610614705:48922:25)
    at Link (http://localhost:3000/_next/static/chunks/pages/signup.js?ts=1620610614705:1587:19)
    at nav
    at Navbar (http://localhost:3000/_next/static/chunks/pages/signup.js?ts=1620610614705:48863:22)
    at div
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1620610614705:8388:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1620610614705:8876:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1620610614705:9012:25)
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate @ react-dom.development.js:26086
renderReactElement @ index.tsx:524
doRender @ index.tsx:793
_callee2$ @ index.tsx:425
tryCatch @ runtime.js:63
invoke @ runtime.js:293
(anonymous) @ main.js?ts=1620610614705:1
react-dom.development.js:67 Warning: Expected server HTML to contain a matching <a> in <a>.

Any idea what's causing this why the form doesn't console.log? I checked each of form field.

Upvotes: 4

Views: 14329

Answers (2)

GMKHussain
GMKHussain

Reputation: 4681

Will resolve

Attempts to access this ref will fail. Did you mean to use React.forwardRef()

Use refs instead of ref

import React, { useRef } from "react";
import MyComponent from "./MyComponent.js"

const MainComponent = (props) => {
      const myRef = useRef();
      //...
      <MyComponent refs={ myRef } />
     //...

Upvotes: 6

Sohaib
Sohaib

Reputation: 11297

You've probably assigned ref to the SignupComponent or some other functional component.

<SignupComponent ref={someRef}>

Function components cannot be given refs because they don't have an instance. Removing the ref will fix the warning or you can forwardRef if you want to assign the ref to some of the input field in your component.

More information on Forwarding Refs: https://reactjs.org/docs/forwarding-refs.html

Upvotes: -2

Related Questions