Reactjs 在 React JSX 返回中过滤 map 的最佳实践是什么

当在组件中返回以下内容以渲染卡片时，您会在何处放置过滤器？

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

我的第一个 idea 是

{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

...}

所以希望有人能解释在返回的jsx中过滤映射的最佳实践是什么.你能做到我想做的事情而不出现调用堆栈错误吗？

编辑:有人说这段代码是正确的，所以我会在早上修复它并更新/关闭它.如果有人想确认一下，太感谢了