Progressive Web Apps with React

Multiple users

If you try logging out and signing in with a new user, all the messages from all users are displayed, as shown:

There's no differentiation between my messages, and the messages of other users. The classic chat application pattern is to put one user's messages on one side, and one on the other. Our CSS is all ready to handle that—we just have to assign the class "mine" to messages that match the current user.

Since we have access to the email of the message author in msg.author, we can compare that to the user we have stored in the state of App. Let’s pass that down as a prop to ChatContainer:

<Route  exact  path="/" render={() ...