react hook form invisible className error

 唔可以用 " , 要用 `

className={`form-control ${errors.surname ? 'is-invalid' : ''}`}

/*Validation Check -> photo, email, hkid + year + day => not allow to creaete

recaptcha

*/

import React, {useState, useEffect} from "react"  

import {Link} from "react-router-dom"

import AuthService from "../services/auth.service";

import { useNavigate } from "react-router-dom";

import "react-toastify/dist/ReactToastify.css";

import {toast} from 'react-toastify';

import { useForm } from "react-hook-form";

import { yupResolver } from '@hookform/resolvers/yup';

import * as yup from 'yup';

export default function Register() {

   

    const handleRegister = async (data) => {

        //e.preventDefault();

        console.log(data);

        try{

       

        /*

          await AuthService.login(userName, password).then(

            () => {

              navigate("/Home");

              window.location.reload();

            },

            (error) => {

              //console.log(2);

              toast.error("登入錯誤, Login Error");

            });

            */

        } catch (err) {

          //console.log(1);

          //console.log(err);

        }

   

      };

      const validationSchema = yup.object().shape({

        surname: yup.string()

            .required('Please enter your first name. 請輸入姓氐')

            .min(6, 'xxxxx'),

       

        });

        const resolver = { resolver: yupResolver(validationSchema) };

     

      const { register, handleSubmit, reset, formState: { errors }} = useForm(resolver);

     

         /* "Please enter your family name. 請輸入名稱"

              Please enter your Hong Kong ID Card No.(First 4 digits). 請輸入香港身分證號碼(首四個數字)"

           */

    return (

        <>

        <div className="login-page">

            <div className="logoCenter">

                <img src="./assets/images/logo.png" alt=""/>

            </div>

            <div className="login-box">

                <div className="login-logo">

                </div>

                <div className="card">

                    <div className="card-body login-card-body">

                        <p className="login-box-msg">

                            <b>Register 註冊</b>

                        </p>

                        <form method="post" id="LoginForm" name="LoginForm" onSubmit={handleSubmit(handleRegister)}>

                           

                        <div className="form-group">

                                    <label>Surname 姓氐</label>

                                    <input name="surname" type="text" autoComplete="false"

                                            className={`form-control ${errors.surname ? 'is-invalid' : ''}`}

                                            {...register('surname')}  />

                                    <div className="invalid-feedback">{errors.surname?.message}</div>

                                    {errors.surname && <span>{errors.surname?.message}</span>}

                            </div>

                            <div className="row">

                                <div className="col-4">

                               

                                </div>

                                <div className="col-4">

                                   

                                    <button type="submit" className="btn btn-primary btn-block">Sign In 登入</button>

                                {/* <button className="g-recaptcha"

                                    data-sitekey="6Lc9TBUhAAAAACO-KhMX2ltQTBYiWofaQsu0-tkS"

                                    data-callback='onSubmit'

                                    data-action='submit'>Sign In 登入aaa</button> */}

                                </div>

                                <div className="col-4">

                                    <button type="button" className="btn btn-warning btn-block"><Link to="/">Back 回首頁</Link></button>

                                </div>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>

     

        </>

    )

}