Mi estado de uso:
const [valuesToSearchFor, setValuesToSearchFor] = useState([]);Tengo el siguiente campo de entrada de búsqueda con onChange:
onChange={() => { setValuesToSearchFor( valuesToSearchFor.includes(value) ? valuesToSearchFor.filter(val => val !== value) : [...valuesToSearchFor, value] ); }}Esto cambia algunos datos en mi página así:
{data.elements.filter((val) => { if(valuesToSearchFor.includes(val.name.toLowercase()){ return val } } El único problema es que cuando elimino el campo de entrada, no se refleja en la matriz. Pregunta ¿Cómo puedo vaciar valUesToSearchFor para que se pueda escribir otra búsqueda en la entrada?
Difícil de decir sin ver más de su código, pero debe desestructurar sus valuesToSearchFor filtradosToSearchFor . De lo contrario, está tratando de modificar un accesorio de estado directamente
onChange={(e) => { const value = e.target.value; setValuesToSearchFor( valuesToSearchFor.includes(value) ? [...valuesToSearchFor.filter((val) => val !== value)] : [...valuesToSearchFor, value] ); }}Como señala @Amiratak88, esto generará un nuevo valor en su matriz con cada pulsación de tecla.
Nuevamente, no estoy seguro de lo que está tratando de hacer, pero puede optar por usar botones que actualicen/restablezcan su estado.
const MyComponent = () => { const [searchValue, setSearchValue] = useState(""); const [valuesToSearchFor, setValuesToSearchFor] = useState([]); return ( <> <input onChange={(e) => { setSearchValue(e.target.value); }} /> <button onClick={(e) => { e.preventDefault(); // update valuesToSearchFor with all unqiue values, including the current searchValue setValuesToSearchFor([...new Set([...valuesToSearchFor, searchValue])]); }} > Search </button> <button onClick={(e) => { e.preventDefault(); setValuesToSearchFor([]); }} > Reset </button> </> ); };