Hay una construcción bastante complicada en mi código, está en const matchedSuggestions. Esta construcción es responsable de las autosugerencias. Por ejemplo: hay varios nombres masculinos (Adam, Adrian, Arnold, Mike). El usuario ingresa la primera letra "A" y ve sugerencias automáticas: Adam, Adrian, Arnold. Luego ingresa la letra "D" y permanece en autosugerencias - Adam, Adrian. Y así.
¿Es posible simplificar de alguna manera esta parte del código?
const onChange = (e) => { const { value } = e.target; setInput(value) if(value.length < 1) { setSuggestedTags([]); setIsValid([]);return; } const matchedSuggestions = tagSuggestions.filter((s) => { return s.slice(0, 2).search(value.slice(0, 2)) > -1 && s.slice(0, 1).search(value.slice(0, 1)) > -1 && s.slice(0, 3).search(value.slice(0, 3)) > -1 && !tags.includes(s) }) setSuggestedTags(matchedSuggestions); if (e.target.value) { setIsValid(() => /^[1-5][0-9]?[0-9]?$|^100$/.test(e.target.value)); } else { setIsValid(true); } setInput(value); };Puede obtener la longitud de la cadena de entrada y usarla como índice para cortar. Aún mejor, puede usar startsWith y, si lo desea, normalizarlo a mayúsculas o minúsculas, como
value = value.toLowerCase(); // normalize tagSuggestions.filter(s => s.toLowerCase().startsWith(value) && // or includes(value) in case you want to validate part of the string !tags.includes(s) // what is this for? );