Creo que esta no es una forma ideal de hacer filtros. Tengo que escribir más si es más y no se ve bien.
Encontré un paquete llamado "useFilter". pero, ¿puedo hacerlo sin usar ningún paquete? como con ganchos o algo así.
import { AddPosition } from "./../../data/careers/AddPosition"; const Positions = () => { const [positions] = useState(AddPosition); const [searchTerm, setSearchTerm] = useState(""); <input type="search" placeholder="Search" onChange={(e) => setSearchTerm(e.target.value)} /> {positions .filter((position) => { if (searchTerm === "") { return position; } else if ( position.category .toLowerCase() .includes(searchTerm.toLowerCase()) ) { return position; } else if ( position.type.toLowerCase().includes(searchTerm.toLowerCase()) ) { return position; } else if ( position.location .toLowerCase() .includes(searchTerm.toLowerCase()) ) { return position; } else if ( position.position .toLowerCase() .includes(searchTerm.toLowerCase()) ) { return position; } }) .map((position) => ( <> <SinglePosition id={position.id} category={position.category} type={position.type} position={position.position} /> </> ))} </div> </div> </div>Puede simplificar esto usando Array.prototype.some y también puede usar useMemo para asegurarse de que el filtrado ocurra solo cuando cambien las positions / searchTerm .
const filteredPositions = useMemo(() => { if(!searchTerm) return positions; const lowerCasedSearchTerm = searchTerm.toLowerCase(); return positions.filter(({id, ...other}) => { // assuming you want to check every value in position return Object.values(other).map(v => v.toLowerCase()).some(v => v.includes(lowerCasedSearchTerm)) }) }, [positions, searchTerm]) Ahora puede asignar posiciones filteredPositions en JSX.
Tu lógica se repite para cada propiedad de position . Combínelos en una sola matriz e itérelo con Array.some() si alguno de los incluye el término, devolvería verdadero:
{positions .filter(({ id, ...rest }) => { const term = searchTerm.toLowerCase(); return !term || Object.values(rest).some(str => str.toLowerCase().includes(term) ); }) .map(position => ( <SinglePosition key={position.id} {...position} /> )) } Nota: al representar una lista de elementos, no olvide incluir una propiedad key . Además, no necesita envolver un solo elemento en un fragmento. Necesita un fragmento solo si representa varios elementos sin un solo padre.