Progressive Web Apps with React

Batching user messages

In the preceding screenshot, you'll notice that we display the author email under each message, even if two messages in the row have the same author. Let's get tricky, and make it so that we group messages from the same author together.

In other words, we only want to display the author email if the next message is not by the same author:

<div id="message-container">  {this.props.messages.map(msg => (    <div      key={msg.id}      className={`message ${this.props.user.email === msg.author &&        'mine'}`}>      <p>{msg.msg}</p>      // Only if the next message's author is NOT the same as this message's    author, return the following:      <p className="author">        <Link to={`/users/${msg.user_id}`}>{msg.author}</Link>      </p>    </div>  ))}</div>

How can we do ...