En mi sitio, estoy usando TagsInput, que permite al usuario ingresar datos en un campo de entrada, presionar el botón Intro y verlos como etiquetas.
Pero tengo un problema: el usuario puede ingresar datos con el mismo valor tantas veces como quiera. Me gustaría restringir esta capacidad y no permitir que se ingresen los mismos datos.
Ya tengo alguna validación que muestra un mensaje si el usuario ha ingresado un formato de datos no válido.
Por lo tanto, me gustaría agregar la capacidad de no aceptar datos si ya están en las etiquetas y mostrar el mensaje correspondiente.
export default function TagsInputRequestURL(props) { const {tags, setTags} = props; const [input, setInput] = useState(""); const [isValid, setIsValid] = useState(true); const onChange = (e) => { const { value } = e.target; if (e.target.value) { setIsValid(() => /^(ftp|https?):\/\/[^ "]+$/.test(e.target.value)); } else { setIsValid(true); } setInput(value); }; const onSubmit = (e) => { e.preventDefault(); if (isValid) { setTags((tags) => [...tags, input]); setInput(""); } }; const deleteTag = (index) => { setTags((prevState) => prevState.filter((tag, i) => i !== index)); }; return ( <div className={classes.container}> {tags.map((tag, index) => <div className={classes.tag}> <ClearIcon className={classes.del} fontSize="big" onClick={() => deleteTag(index)} /> {tag} </div> )} <form onSubmit={onSubmit}> <input className={classes.input} value={input} placeholder={props.inputPlaceholder} onChange={onChange} /> {!isValid && <small style={{ color: "red" }}>Invalid URL</small>} </form> </div> ); }export default function TagsInputRequestURL(props) { const {tags, setTags} = props; const [input, setInput] = useState(""); const [isValid, setIsValid] = useState(true); const onChange = (e) => { const { value } = e.target; if (e.target.value) { setIsValid(() => /^(ftp|https?):\/\/[^ "]+$/.test(e.target.value)); } else { setIsValid(true); } setInput(value); }; const containsString = (str) => { if(!str || str === '') return false const strLower = str.toLowerCase(); let isExist = false for(let i=0; i<tags.length; i++){ let itemLower = tags[i].toLowerCase(); if(strLower === itemLower){ isExist = true; break; } } return isExist; } const onSubmit = (e) => { e.preventDefault(); if (isValid && !containsString(input)) { setTags((tags) => [...tags, input]); setInput(""); } else{ console.log("You already hame same value in the 'tags' array. Try with different string.") } }; const deleteTag = (index) => { setTags((prevState) => prevState.filter((tag, i) => i !== index)); }; return ( <div className={classes.container}> {tags.map((tag, index) => <div className={classes.tag}> <ClearIcon className={classes.del} fontSize="big" onClick={() => deleteTag(index)} /> {tag} </div> )} <form onSubmit={onSubmit}> <input className={classes.input} value={input} placeholder={props.inputPlaceholder} onChange={onChange} /> {!isValid && <small style={{ color: "red" }}>Invalid URL</small>} </form> </div> ); }