'<Flex> component in React not printing to screen

So I'm trying to make my own chat app with react.js, next.js and firebase. Everything was going fine but when I compiled my app for web the box witch was supposed to hold the messages didn't print to the screen. I tried console logging the messages and the sender and it worked just how I wanted it to. I don't know what's the problem

This is the code for the function with the messages:

export default function Chat() {
    const router = useRouter();
    const { id } = router.query;

    const [user] = useAuthState(auth);

    const q = query(collection(db, `chats/${id}/messages`), orderBy("timestamp"));
    const [messages] = useCollectionData(q);

    const [chat] = useDocumentData(doc(db, "chats", id));
    const bottomOfChat = useRef();

    console.log(messages);

    const getMessages = () => {
        messages?.map(msg => {
            const sender = msg.sender === user.email;
            console.log(msg.text, msg.sender);

            return (
                <Flex key={Math.random()} alignSelf={sender ? "flex-start" : "flex-end"} bg={sender ? "blue.100" : "green.100"} w="fit-content" minWidth="60px" borderRadius="lg" p={3} m={1}>
                    <Text>{msg.text}</Text>
                </Flex>
            );
        });

        useEffect(() => {
            setTimeout(
                bottomOfChat.current.scrollIntoView({
                    behavior: "smooth",
                    block: 'start',
            }), 100)
        , [messages]});
    };
    
    return (
        <Flex
            h="100vh"
            bg="#323232"
        >
            <Head>
                <title>ChatApp</title>
            </Head>
            <Flex
                flex={1}
                direction="column"
            >
                <Flex
                    flex={1}
                    direction="column"
                    pt={4}
                    mx={5}
                    overflowX="scroll"
                    sx={{scrollbarWidth: "none"}}
                >
                    {getMessages()}
                    <div ref={bottomOfChat}></div>                       
                </Flex>
            </Flex>
        </Flex>
    )
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'<Flex> component in React not printing to screen

Sources

Related Questions