How can I set a custom validity so that it has a link in it?

Question

React

I have a custom function to define a username or email address and I want to give the user the option to log in from there. Is it possible?
I tried creating an object for the Link object, from the DOM react-router, but it doesn't show up when a comma is added, or return the object object when inserted with a plus sign. I want the notification received by email to include a link so that the user can directly click on the login.

handleSubmit = async (e) => {
        e.preventDefault();
        const EmailField = document.getElementById('email'); 
        const userField = document.getElementById('username');
        const signinRedirect = <Link to='/signin'> login </Link>;
        const newUser = {
            username : this.state.username, 
            email : this.state.email, 
            password : this.state.password, 
            confirmPassword : this.state.confirmPassword, 
        }; 
        //check passwords match before submitting
        if (this.state.passwordsMatch) {
            let url = window.location.hostname.split('.')[0] === 'localhost' ?  'http://localhost:3306' : 'https://petsosbackend.apps.nonprod-mpn.ro11.allstate.com';
            try {
            await axios.post(url + '/register', newUser)
            .then(res=> {
              if (res.status===202) {
                this.props.history.push('/registersuccess');
                //if email is taken
              } else if (res.data==='email'){                
              EmailField.setCustomValidity('Email address is in use, please select another or '+ {signinRedirect}); 
                EmailField.reportValidity();
                //if name is taken       
              } else if (res.data==='name') {       
                userField.setCustomValidity('Username is in use, please select another or' + signinRedirect); 
                userField.reportValidity();
              }
            })            
            } catch(error) { 

              console.log("Catch = ", error.response); 


            }
        }

    }

There's obviously more logic here, but consider these are the two key parts and you just need to figure out how to make signinRedirect appear in the validity warning.
Thanks a lot!..

Answer 1

Principle:

const Example = () => (
  <div className="form-control">
    <input type="text" name="email" value={email} onChange={handleChange} />
    {isEmailInUse && (
      <div className="error">
        Email address is in use, please select another or <Link to='/signin'>Sign in</Link>
      </div>
    )}
  </div>
);