Estoy tratando de filtrar una matriz usando Chakra UI. Pero el filtrado no se puede hacer correctamente. He hecho muchas pruebas para asegurarme de que si el problema está en otros códigos, puedo decir que el problema está causado por el siguiente código. Sin embargo, puedo compartir más código contigo si quieres.
Nota : La lista desaparece cuando existe filterText, y la lista funciona correctamente cuando filterText no existe. Este código pertenece a una aplicación para tomar notas. Quiero filtrar las notas que ya están en la lista, no mostrar las notas fuera del filtro.
Lo implementé => https://take-notesw.surge.sh/
return ( <Grid templateColumns="repeat(3, 1fr)" gap={6} marginTop="2"> { filterText && Array(notes).filter(note => note.title?.toLocaleLowerCase() .includes(filterText) .map(filteredNote => ( <Box key={filteredNote.id} bg="gray.100" w="100%" h="100px" overflow="auto" textAlign="center" > <Text fontSize="18px" bg={handleNoteColor(filteredNote.color)}>Note {filteredNote.id}</Text> <Text fontSize="13px">{filteredNote.title}</Text> </Box> )) ) } { !filterText && notes.map((note) => ( <Box key={note.id} bg="gray.100" w="100%" h="100px" overflow="auto" textAlign="center" > <Text fontSize="18px" bg={handleNoteColor(note.color)}>Note {note.id}</Text> <Text fontSize="13px">{note.title}</Text> </Box> )) } </Grid > )Tienes un paréntesis fuera de lugar. Te falta un ) después de las includes y, en cambio, has colocado ese ) adicional después del mapa.
return ( <Grid templateColumns="repeat(3, 1fr)" gap={6} marginTop="2"> { filterText && Array(notes) .filter(note => note.title?.toLocaleLowerCase().includes(filterText) ) .map(filteredNote => (...)) } { !filterText && notes.map((note) => (...)) } </Grid> )