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!");
    };
}