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

Question

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.

Answer 1

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 } />
     //...