Блог

весь сегмент кода:

 const Message= forwardRef(({ message,username}, ref)=> {
    const isUser = username === message.username;
    return (
            <div ref={ref} className={`message ${isUser amp;amp; 'message__user'}`}>
                <Card className={isUser ? "message__userCard" : "message__guestCard"}>
                <CardContent >
                    <Typography 
                    color="black"
                    variant="h5"
                    component="h2"
                    >
                        {message.username}:{message.message}
                    </Typography>
                </CardContent>
                </Card>
            </div>
            
    )
});

export default Message;
 

ошибка показывает, что часть имени пользователя в этой части не определена.
Не удается прочитать свойства неопределенного (чтение «имя пользователя»)

 const isUser = username === message.username;
 

родителем, в котором вызывается сообщение, является

 <FlipMove>
     {
       messages.map(({id , message}) => (
         <Message key={id} username={username} message={message}/> //Message.js component,passing the text to message component
       ))
     }
     </FlipMove>