I am trying to filter an array using Chakra UI. But the filtering cannot be done correctly. I have done many tests to make sure that if the problem is in other codes, I can say that the problem is caused by the code below. However, I can share more code with you if you want.
Note: The list disappears when the filterText exists, and the listing works correctly when the filterText does not exist. This code belongs to a note taking app. I want to filter the notes that are already listed, not show the notes outside the filter.
I deployed it => 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 >
)
You've got a misplaced parentheses. You're missing a ) after the includes and have instead placed that extra ) after the map.
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>
)