Is it possible to set an id to a Material UI component and refer to it?

Question

React

I am using Material UI React in a project. And I decided to set the FieldText id='firstName' component and use it. When clicked, the id is de2e8a5b-7aab-4cb4-91bf-31817b6307e6.
Component example:

<Box className={classes.boxContainer}>
          <TextField
            id='firstName'
            error={firstName !== '' && !firstNameValidationResult.valid}
            helperText={firstNameValidationResult.errors[0]}
            onChange={(event) => {
              return test(event, id);
            }}
            margin='normal'
            label={ETitleUser.firstName}
            inputProps={{ maxLength: 20 }}
            defaultValue=''
          />
          <TextField
            id='dept'
            error={dept !== '' && !deptValidationResult.valid}
            helperText={deptValidationResult.errors[0]}
            onChange={() => {
              return handlerOnChange;
            }}
            margin='normal'
            label={ETitleUser.dept}
            inputProps={{ maxLength: 20 }}
            defaultValue=''
          />
</Box>

Function where i want to get id=''firstName"

const handlerOnChange = (
    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
    id: string
  ) => {
    switch (id) {
      case 'firstName':
        setFirstName(event.target.value);
        break;
      case 'lastName':
        setLastName(event.target.value);
        break;
      case 'dept':
        setDept(event.target.value);
        break;
      case 'login':
        setLogin(event.target.value);
        break;
    }
  };

Can you tell me if it is possible to set the id to the component and refer to it? Or Material UI due to the fact that the components are encapsulated by id will not work.

Answer 1

If either for some reason puts its id on the element, then for some reason it needs this id. Rewriting it is a bug. Liba most likely provides his own way to trace the source of the event.
...upd: I checked - it will normally pass the id as it is, your problem is something else:

Answer 2

onChange={(event) => {
  return test(event, id);
}}

And what is id here? Where does it come from? Certainly not from input'a - this one will be event.target.id.