Change required input message in React

Question

I need to change the alert (Please fill out this field) in React.

Example:

A Form component and an Input component.

PD: I am able to do it in a simple HTML with JS, but I just can't get it working with React

PD2: I know I can use the stated to validate and throw custom error messages, but I just have to do it using the required alert promp

Answer 1

You can apply this piece of code inside the component of the input that you want to change the alert:

htmlInput.oninvalid = function(e) {
    e.target.setCustomValidity("Here is your text!");
};

Also here is an example of use in a component:

componentDidMount(){
    var htmlInput = document.getElementById("id");
    htmlInput.oninvalid = function(e) {
        e.target.setCustomValidity("This can't be left blank!");
    };
}

Answer 2

i managed to solve this like this

onInvalid={F => F.target.setCustomValidity('Enter User Name Here')} 
onInput={F => F.target.setCustomValidity('')} 

Answer 3

None of these answeres helped me, this is easiest way Just add this in your props ex:

  onInvalid={e => e.target.setCustomValidity("Code is required")}