Change required input message in React

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

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