'Login page with either username or email using react

I am creating a login page which should be logged in if we enter either username or email and password like that of Facebook where we are able to logged in either by email or phone number and password but have no idea how to do it. It would be good if someone would help me out. My code includes:

import React from 'react'

const Login = () => {
  return (
      <div>
          <form>
              <div className="form-group">
                  <label htmlFor="Email or UserName">
                      Email or username
                  </label>
                  <input 
                      type="email"
                      placeholder="email or username"
                      required
                      className= "Input" />
                  
              </div>
              <div className="form-group">
                  <label htmlFor="Password">
                      Password
                  </label>
                  <input 
                      type="Password"
                      placeholder="Password"
                      required
                      className= "Input" />
                  
              </div>
              <button type = "submit">Log in</button>
          </form>
      </div>
  )
}

export default Login


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source