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

Please add what is the code supposed to actually do and what it is doing? — Tushar Shahi
– Tushar Shahi, Commented Sep 20, 2021 at 11:15
No, it won't, Lodash won't fix this issue and a simple filter is a pointless use case for Lodash. It looks to me like you want to render notes that contain the filterText. If so I'll write out the answer for that :) — matt123miller
– matt123miller, Commented Sep 20, 2021 at 11:16
Misplaced brackets. You are doing the .map within the .filter. You probably meant to do it after the .filter.... ie .filter(...).map(...) — spender
– spender, Commented Sep 20, 2021 at 11:17
The parentheses are not properly used. You're trying to use map on includes — Ramesh Reddy
– Ramesh Reddy, Commented Sep 20, 2021 at 11:17
May I ask what error did you get? If notes is an array everything should be fine, may I suggest adding a condition note.isArray()? it should be ` filterText && note.isArray() && notes.filter(note =>........` — Nat
– Nat, Commented Sep 20, 2021 at 11:30

Adam Jenkins · Accepted Answer · 2021-09-20 12:09:11Z

2

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

edited Sep 20, 2021 at 12:09

answered Sep 20, 2021 at 11:17

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user5734311 Over a year ago

No idea what you're referring to, but he removed the comment now

Mehmet Aziz Algüllü Over a year ago

@ChrisG I added a little changes on this solution and the error was resolved. That's why I deleted the comment.

Collectives™ on Stack Overflow

Filter array in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related