Estoy trabajando en un proyecto de reacción y tengo un botón que generará dos entradas dinámicas que serán un par de valores clave. Quiero validarlos antes de que el usuario agregue un campo más.

La validación será, no debe ser un valor duplicado y no se deben permitir caracteres especiales. Pero la validación debería aparecer debajo de su campo individual.

Demostración de Stack Blitz: https://stackblitz.com/edit/react-helloworld-gamgmo

A continuación se muestra mi código,

 const App = () => { const [defaultTags, setDefaultTags] = useState({}); const [formValues, setFormValues] = useState([{ name: '', email: '' }]); const [isEmpty, setIsEmpty] = useState(true); let handleChange = (i, e) => { let newFormValues = [...formValues]; newFormValues[i][e.target.name] = e.target.value; setFormValues(newFormValues); }; let addFormFields = () => { setFormValues([...formValues, { name: '', email: '' }]); setIsEmpty(true); // Some validation for feilds }; validateAndAdd(){ } let removeFormFields = (i) => { let newFormValues = [...formValues]; newFormValues.splice(i, 1); setFormValues(newFormValues); setIsEmpty(false); }; return ( <> {formValues.map((element, index) => ( <div className="form-inline" key={index}> <label>Name</label> <input type="text" name="name" value={element.name || ''} onChange={(e) => handleChange(index, e)} /> <label>Email</label> <input type="text" name="email" value={element.email || ''} onChange={(e) => handleChange(index, e)} /> {index ? ( <button type="button" className="button remove" onClick={() => removeFormFields(index)} > Remove </button> ) : null} </div> ))} <div className="button-section"> <button disabled={isEmpty} type="button" onClick={() => addFormFields()} > Add </button> </div> </> ); }; export default App;