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 ponents 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.

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 ponents 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.

• javascript
• reactjs

2 Answers 2

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

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

<SignupComponent ref={someRef}>

Function ponents 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 ponent.

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