Why can't my data show in the console on form submission?

Question

I am a newbie to React, enjoying my progress very much. My problem at this instance is that, I have used the same criteria in this Signup form as I have in the Login form, but for some reason I can't seem to comprehend, the Signup form does not console.log() the data, where as the Login form works well. Here is my code for Signup form:

import React, { useState } from "react";
import PhoneInput from "react-phone-number-input";
import { NavLink } from "react-router-dom";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useForm } from "react-hook-form";
import signupInputs from "../static/SignupInputs";

const schema = yup.object().shape({
  user_name: yup.string().required("Username is required!"),
  email: yup.string().required("Please enter email!").email(),
  password: yup.string().required("Password is require").min(5),
  c_password: yup.string().required("This field must match password above"),
  tel: yup.string().required(),
  mbn: yup.string().required("Enter your mobile money network!"),
  account_name: yup.string().required("Enter your MBN Account Name!"),
});

function SignupForm(props) {
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(schema),
  });

  const [value, setValue] = useState();
  const onSubmit = (data) => console.log(data);

  return (
    <div id="signupForm">
      <h1>Signup Form</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        {signupInputs.inputs.map((input, key) => {
          return (
            <div key={key}>
              <p>
                <input
                  type={input.type}
                  name={input.name}
                  placeholder={input.placeholder}
                  id={input.id}
                  ref={register}
                />
              </p>
              <p className="errorMessages">{errors[input.name]?.message}</p>
            </div>
          );
        })}
        <PhoneInput
          placeholder="Enter mobile phone number"
          value={value}
          onChange={setValue}
        />
        <button type="submit">Signup</button>
      </form>

      <h2>
        Already have an account? <br />
        <NavLink
          to="/login"
          spy
          smooth
          offset={-70}
          duration={500}
          onClick={props.displayLoginHandler}
          className="App-link Login-link"
        >
          Login
        </NavLink>
      </h2>
    </div>
  );
}

export default SignupForm;

Then, here is code for the Login form:

import React from "react";
import { NavLink } from "react-router-dom";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import loginInputs from "../static/LoginInputs";

const schema = yup.object().shape({
  user_name: yup.string().required("Username is required!"),
  password: yup.string().required("Password is require"),
});

function Login(props) {
  const { register, handleSubmit, errors } = useForm({
    resolver: yupResolver(schema),
  });
  const onSubmit = (data) => console.log(data);
  return (
    <div id="loginForm">
      <h1>Login Form</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        {loginInputs.inputs.map((input, key) => {
          return (
            <div key={key}>
              <p>
                <input
                  type={input.type}
                  name={input.name}
                  placeholder={input.placeholder}
                  id={input.id}
                  ref={register}
                />
              </p>
              <p className="errorMessages">{errors[input.name]?.message}</p>
            </div>
          );
        })}
        <button type="submit">Login</button>
      </form>
      <h2>
        Not a member yet? <br />
        <NavLink
          to="/"
          onClick={props.displaySignupHandler}
          className="App-link Login-link"
        >
          {" "}
          Signup!
        </NavLink>
      </h2>
    </div>
  );
}

export default Login;

And I have two separate files which organize the input fields; the SignupInputs and LoginInputs respectively:

THE SIGNUP INPUTS

const signupInputs = {
  inputs: [
    {
      type: "text",
      name: "user_name",
      placeholder: "Enter your Username",
      id: "user_name",
    },

    {
      type: "email",
      name: "email",
      placeholder: "emailName@domain.com",
      id: "email",
    },

    {
      type: "password",
      name: "password",
      placeholder: "Enter your unique password",
      id: "password",
    },

    {
      type: "password",
      name: "c_password",
      placeholder: "Confirm password",
      id: "c_password",
    },

    {
      type: "tel",
      name: "phone",
      placeholder: "Mobile Money Number",
      id: "phone",
    },

    {
      type: "text",
      name: "mbn",
      placeholder: "Mobile Banking Network, e.g. Airtel",
      id: "mbn",
    },

    {
      type: "text",
      name: "account_name",
      placeholder: "Account Holder",
      id: "account_name",
    },
  ],
};

export default signupInputs;

AND THE LOGIN INPUTS

const loginInputs = {
  inputs: [
    {
      type: "text",
      name: "user_name",
      placeholder: "Enter your Username or Email",
      id: "user_name_L",
    },
    // {
    //   type: "email",
    //   name: "email",
    //   placeholder: "emailName@domain.com",
    //   id: "email_L",
    // },
    {
      type: "password",
      name: "password",
      placeholder: "Enter your unique password",
      id: "password_L",
    },
  ],
};

export default loginInputs;

NB: All these are .jsx files

Answer 1

It's because you are not preventing the default behavior of the form, which is a browser method .so the page will be loaded/refreshed to the target target. To fix you need to call this method: event.preventDefault() See this answer might be relevant as well: React - Preventing Form Submission Also this: Disable form auto submit on button click