Estoy tratando de mostrar un mensaje de error si el cliente no hizo clic en la casilla de verificación, pero muestra el mensaje de error de forma predeterminada. ¿Cómo me las arreglo para mostrarlo solo después del envío?
const InputForm=()=>{ const [value ,setValue] = useState(""); const [check,setCheck] = useState(null) const getValue=(e)=>{ setValue(e.target.value); } const getCheck=(e)=>{ setCheck(e.target.checked); } const handleSubmit=(e)=>{ e.preventDefault(); const emailValidator =/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ if (value.match(emailValidator)) { console.log("Valid"); }else{ console.log("Invalid"); } }; return( <form className="inputForm" onSubmit={handleSubmit}> <div className="tos" > <label className="container"> <span>I agree to <strong>terms of service</strong></span> <input type="checkbox" onChange={getCheck}/> <span className="checkmark" ></span> </label> <p style={check?{display:"none"}:{display:"block",color:"red"}}>You must accept the terms and conditions</p> </div> <Footer/> </form> ) }; import { useEffect, useState } from "react"; export default function App() { const [checked, setChecked] = useState(null); const [error, setError] = useState(false); useEffect(() => { checked && setError(false); }, [checked, setError]); const handleSubmit = (e) => { e.preventDefault(); if (!checked) { setError(true); } else { // do what you want } }; return ( <form className="inputForm" onSubmit={handleSubmit}> <div className="tos"> <label className="container"> <span> I agree to <strong>terms of service</strong> </span> <input type="checkbox" onChange={(e) => setChecked(e.target.checked)} /> <span className="checkmark"></span> </label> {error && ( <p style={{ color: "red" }}> You must accept the terms and conditions </p> )} </div> <button type="submit">submit</button> </form> ); } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Aquí hay una solución: https://codesandbox.io/s/crimson-field-m6j5h?file=/src/App.js
Debe tener un estado separado para el error y mostrar el mensaje solo si ese estado es verdadero. Ese estado debe establecerse al llamar a la función handleSubmit. Para eliminar el mensaje de error cuando la casilla de verificación está marcada, puede escucharlo en un gancho useEffect.