What is best practice for filtering a map in React JSX return

Admin 1
Viewed 63

When returning the below in a component to render cards where would you put a filter on something like this?

    {state.messages.map((message, index) => (
        <div key={index}>
            <Center>
            <Box
                maxW={'850px'}
                w={'full'}
                boxShadow={'2xl'}
                rounded={'md'}
                p={6}
                overflow={'hidden'}
                >
                    <Flex>
                    <h4>UserID: {message.id}</h4>
                    <Spacer/>
                    <Button onClick={'test'} colorScheme='teal' variant='solid' >
                    <DeleteIcon/>
                    </Button>
                    </Flex>
                    <h3>User(email for now): {message.user} </h3>
                    <h2 >message: {message.message}</h2>
                    <p>Date: {message.createdAt}</p>
                </Box>
            </Center>
        <Container height={50}/>
        </div>   
        ))}

My first thought was something like

{state.messages.filter((message) => message.id).map((message, index) => (... 

this doesn't return anything but a regular map so not it probably just an example

...}

So hoping someone can explain what best practice is for filtering a map in returned jsx. can you even do what I'm trying to do without callstack errors?

edit: someone said the snippet is the right way, so i'll fix it in the morning and update/close this. if anyone else wants to confirm overnight too many thanks

reactjs
2 Answers

Your approach is the best approach.

Firstly, filter and map is the clearest functions to use.

Secondly, it's better to use filter before map for two reasons:

  • By removing unwanted items before mapping them, you save computations as you don't map the unwanted items.
  • The map function returns JSX.Elements which is much harder to apply a filter on than the objects in state.messages.
user_85714340

As the other user in the thread suggested this is solution I went with and it works great

{state.messages.filter((message) => message.id === user?.issuer).map((message, index) => (
        <div key={index}>
            <Center>
            <Box
                maxW={'850px'}
                w={'full'}
                boxShadow={'2xl'}
                rounded={'md'}
                p={6}
                overflow={'hidden'}
                >
                    <Flex>
                    <h4>UserID: {message.id}</h4>
                    <Spacer/>
                    <Button onClick={'test'} colorScheme='teal' variant='solid' >
                    <DeleteIcon/>
                    </Button>
                    </Flex>
                    <h3>User(email for now): {message.user} </h3>
                    <h2 >message: {message.message}</h2>
                    <p>Date: {message.createdAt}</p>
                </Box>
            </Center>
        <Container height={50}/>
        </div>   
        ))}

user?.issuer is context auth ID so it maps based on having the ID of a previous post === to your auth id

Admin1
Related