How can I clear the the inner text of a ref.current value, in React?

Question

How can I access the inner text value property of a ref.current.

By console.log(loginField.current) I got:

<div class="some name">
   <input aria-invalid="false" id="login" placeholder="Email" type="text" class="other name" value="">
</div>

The way I set loginField, is:

  let loginField = React.createRef();

and

          <FormControl className={clsx(classes.margin, classes.textField)}>
            <StyledInput
              id={LOGIN}
              type="text"
              value={values.login}
              disableUnderline={true}
              placeholder="Email"
              ref={loginField}             // I set it here
              onFocus={handleFocus}
              error={fieldsErrors.loginError !== ''}
              onChange={handleChange(LOGIN)}
            />
          </FormControl>

I need to clear the inner input of this div from previous values. (set it to '')

Thanks in advance

Rafael

Answer 1

Since you mentioned that you are using MUI which basically gives a wrapped component according to docs here and to pass refrence to input you ll have to pass a prop to comonent as

   ...
   inputRef={myref}
   ...