Filter array in React

Question

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 >
)

Answer 1

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>
)