Ошибка анонимной функции в React-Native

Question

import React, { forwardRef } from "react";
import { Card, CardContent, Typography } from "@material-ui/core";
import './Message.css';

const Message = forwardRef(({ message, username }, ref) => {
    const isUser = username === message.username;

    return (

        <div ref={ref} className={`message ${isUser && "message_user"}`}>
            <Card className={isUser ? "message_userCard" : "message_guestCard"}>
                <CardContent>
                    <Typography
                        color="white"
                        variant="h5"
                        component="h2"
                     >
                        {message.username}: {message.message}
                    </Typography>
                </CardContent>
            </Card>
        </div>
    )
})

export default Message

Я не знаю, что делать, моя консоль продолжает возвращаться: TypeError: Не удается прочитать свойство username неопределенного (анонимная функция) src / Message. js: 6 ▶ Свернуто 16 кадров стека.

Answer 1

Вы сами запутались const isUser = username === message.username. Что я сделаю здесь.

create hook.

const Message = forwardRef(({ message, username }, ref) => {
    const [isUser, setIsUser] = useState(false)
    username === message.username ? setIsUser(true) : setIsUser(false)
  return(
       <div>
          {isUser? <div>True</div> : <div>False</div>}
       </div>
      )

Не стесняйтесь задавать вопрос.