I am looking to create a fixed-size window for displaying text from the component <Message/>. If the text is longer, I want it to be scrollable within the fixed window size.
See screenshot below:
export default function AllMessages(){
...
return(
<div className="message-style">
...
<div className="message-item">
{messagesState.map(message => (
<ul class="list-group">
<Message from = {message.sender} to = {message.receiver} subject = {message.subject} content = {message.message} date = {message.creationDate}/>
</ul>
))}
...
}
export default function Message(props){
return(
<li class="list-group-item">
<div className="container-msg">
<div>
<h5>{props.from}</h5>
<h5>{props.to}</h5>
<p>{props.subject}</p>
<p>{props.content}</p>
<p>{props.date}</p>
</div>
<div>
<span className="mx-2 text-danger" /*onClick={handleDelete}*/>
<i className="fas fa-trash" />
</span>
</div>
</div>
</li>
)
}