I have html tags that show with my message , can you please help - Thank you

[AmzylMohcine]

this is the code of MyMessage :

const MyMessage = ({message}) => {
if (message.attachments && message.attachments.length>0) {

    return (
        <img
         src={message.attachments[0].file}
          alt="message-attachment" 
          className="message-image" 
          style={{float :'right'}}
          />

    )

}
return ( 
    <div className="message" style={{float:'right' , marginRight:'18px',color:'white' , backgroundColor :'#3B2A50'}}> 
        {message.text} 
    </div>  
);

};

export default MyMessage ;

This is the code of Chatfeed :

import MessageForm from './MessageForm' ;
import MyMessage from './MyMessage' ;
import TheirMessage from './TheirMessage' ;
const ChatFeed = (props) => {
const { chats , activeChat , userName , messages} = props ;

const chat = chats && chats[activeChat] ; 

const renderMessages = () => { 

    const keys = Object.keys(messages) ; 

    return keys.map((key ,index) => { 
        const message = messages[key]; 
        const lastMessageKey = index === 0 ? null : keys[index-1] ;
        const isMyMessage = userName ===message.sender.username;

        return ( 
            <div key={`msg_${index}`} style ={{ width :'100%' }}> 
         <div className="message-block">
        {isMyMessage
          ? <MyMessage message={message} />
          : <TheirMessage message={message} lastMessage={messages[lastMessageKey]} />}
      </div>
            <div className="read-receipts"  style= {{ marginright : isMyMessage? '18px': '0px', marginLeft : isMyMessage ?'0px':'68px'}}>
            read-receipts

            </div>
            
            </div>
            
        )
    })
}


if (!chat)  return 'Loading..' ; 
return  ( 
    <div className="chat-feed" > 
    <div className="chat-title-container">
        <div className="chat-title">  {chat.title}</div>

        <div className="chat-subtitle"> {chat.people.map((person)=>` ${person.person.username}`)} </div>
         </div>
       { renderMessages() }
       
       <div style={{ height: '100px' }} />
  <div className="message-form-container">
    <MessageForm {...props} chatId={activeChat} />
  </div>
</div>
     
);

}

export default ChatFeed ;

[adalaw]

I had this issue but when I opened it the next day, the issue disappeared. I think restart your computer may help.

[Preethi-ST]

<div className="message" style={{float:'right' , marginRight:'18px',color:'white' , backgroundColor :'#3B2A50'}}> 
        {message.text}
</div>

While saving file .js, message.text will contain "<p><our message></p>". And that is the reason our message is rendered with <p>.....</p> tag. Give a try by saving files all the respective files with .jsx