I have an array of messages and I am currently using the map() function. Each message in the array has two keys - one for the author and another for the message content. What I want to achieve is to change the styles of the div tag when displaying the last message. How can I accomplish this? Specifically, while mapping through the messages array, if the current element being mapped is the last one, I would like to add a div with modified styles (such as adding shadow or changing background focus on that specific div tag). Can you guide me on how to do this?
Code:
<div id="messages" className="card-block">
{this.state.messages.map((message, index) => {
if(message.author === this.props.match.params.user){
return (
<div key={index} className="msgBoxRight"><p className="msgTextRight">{message.message}</p></div>
)
}else{
return (
<div key={index} className="msgBoxLeft"><p className="msgTextLeft">{message.message}</p></div>
)
}
})}
</div>
Screenshot of chat app:
https://i.stack.imgur.com/JcTXn.png
Essentially, I wish to apply different styles to the latest message in the chat box, such as giving it a background focus or a box shadow. How can I achieve this effect?