Passing arguments for onFocus event in React

Question

I am calling a function and passing it arguments when focusing an input like so :

<input
      type="text"
      placeholder="Password"
      onFocus={e => this.onInputFocus(e, "email")}

  />

Here is the function being called:

onInputFocus = (e, string) => {
    console.log(e, string);
    document.querySelector(`.label_${string}`).style.display = "block";
    setTimeout(() => {
      document.querySelector(`.label_${string}`).classList.add("focused");
    }, 50);
  };

When I console.log the string I pass to the function as an argument, it returns undefined in my console while the event logs out.

Am I doing something wrong or just missing a concept?

Heres full component:

import React, { Component } from "react";

class Login extends Component {
  onInputFocus = (e, string) => {
    console.log(e, "Argument Passed " + string);
    document.querySelector(`.label_${string}`).style.display = "block";
    setTimeout(() => {
      document.querySelector(`.label_${string}`).classList.add("focused");
    }, 50);
  };
  onInputBlur = name => {
    document.querySelector(`.label_${name}`).classList.remove("focused");
    setTimeout(() => {
      document.querySelector(`.label_${name}`).style.display = "none";
    });
  };
  render() {
    return (
      <main className="login">
        <div className="login_container">
          <div className="form_card">
            <form>
              <div className="form_team">
                <label className="label_email" htmlFor="Email">
                  Email
                </label>
                <input
                  type="text"
                  placeholder="Email"
                  onFocus={this.onInputFocus}
                  onBlur={this.onInputBlur}
                />
              </div>
              <div className="form_team">
                <label htmlFor="Password">Password</label>
                <input
                  type="text"
                  placeholder="Password"
                  onFocus={e => this.onInputFocus(e, "email")}
                  onBlur={e => this.onInputBlur(e, "password")}
                />
              </div>
            </form>
          </div>
        </div>
      </main>
    );
  }
}

export default Login;

Answer 1

You are checking the wrong portion of HTML, you have this in your code:

<input
   type="text"
   placeholder="Email"
   onFocus={this.onInputFocus}
   onBlur={this.onInputBlur}
/>

Which (as you can imaging) only passes the event e , just do what you are doing in the other input and you're all good! Probably your form should be more like:

       <form>
          <div className="form_team">
            <label className="label_email" htmlFor="Email">
              Email
            </label>
            <input
              type="text"
              placeholder="Email"
              onFocus={e => this.onInputFocus(e, "email")}
              onBlur={e => this.onInputBlur(e, "email")}
            />
          </div>
          <div className="form_team">
            <label htmlFor="Password">Password</label>
            <input
              type="text"
              placeholder="Password"
              onFocus={e => this.onInputFocus(e, "password")}
              onBlur={e => this.onInputBlur(e, "password")}
            />
          </div>
        </form>