const onChangeValidate= (e) => { var phone = e.target.value; if( !(phone.match('[0-9]{10}')) ){ setPhoneNo(false); setErrorMessage("Please enter 10 digit") }else{ setPhoneNo(true) } } <p>{setPhoneNo===false?errorMessage:''}</p> Set like these if there will be setphone no false then msg will be shown

Parece que entiende la construcción básica de un componente de función usando el estado, pero hay un par de problemas.

1. Todos los controladores de eventos recibirán ese evento como argumento. Entonces puede escribir <input onChange ={onChangeValidate} /> y <button onClick={validateFunc}>Submit</button> .

2. Tal vez sea mejor usar la test en lugar de la match en este caso: /[0-9]{10}/.test(phone) .

Pero también creo que debería permitir que el formulario haga la validación por usted, en lugar de JS. De esta manera, no necesita el estado de error ya que la validación se maneja automáticamente.

Envuelva su entrada y botón en un elemento <form> con su propio controlador onSubmit , haga que la entrada required y agregue type="submit" al botón. Puede usar CSS para cambiar el estilo de la entrada si no es válido.

 const { useState } = React; function Example() { const [phoneNo, setPhoneNo] = useState(''); // Update the phone number state when the // input changes function handleChange(e) { setPhoneNo(e.target.value); } // In this example prevent the form from // submitting so we can log the state, but you'll probably // want to do an AJAX call here to submit the form function handleSubmit(e) { e.preventDefault(); console.log(phoneNo); } // Add your regex pattern to the input // and make it required. If you submit an invalid // number you'll get a neat little tooltip warning // you of the issue, and the form won't submit until // it has been fixed return ( <form onSubmit={handleSubmit}> <input pattern="[0-9]{10}" placeholder="Add a phone number" onChange={handleChange} required /> <button type="submit">Submit</button> </form> ); } ReactDOM.render( <Example />, document.getElementById('react') );

 input:invalid { border: 1px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>

¡Prueba esto!

 const [phoneNo, setPhoneNo] = useState(false) const [errorMessage, setErrorMessage] = useState("") const validateFunc = () => { if(phoneNo) { // perform submittion } } const onChangeValidate= (e) => { var phone = e.target.value; if( !(phone.match('[0-9]{10}')) ){ setPhoneNo(false); setErrorMessage("Please enter 10 digit"); }else{ setPhoneNo(true); setErrorMessage(""); } } ---- <input onChange ={(e) => onChangeValidate(e)} /> <button type="button" onClick = {validateFunc()}>Submit</button> <p>{errorMessage}</p>