The code for UserContainer will be the same as ChatContainer, with two major differences:
- We only want to show the messages from our messages array that match the ID from the URL parameters
- We want to show the author email at the top of page, before any other messages
Firstly, in App.js, convert the UserContainer route to use the render prop, the same as ChatContainer, and pass in the following props:
<Route
path="/users/:id"
render={({ history, match }) => (
<UserContainer
messages={this.state.messages}
messagesLoaded={this.state.messagesLoaded}
userID={match.params.id}
/>
)}
/>Note that React Router automatically gives us the history and match props in our render method, which we use here to grab the user ID from the URL parameters.
Then, in UserContainer, let’s set up our loading indicator. Also, ensure that you give UserContainer a className of inner-container for CSS purposes:
<div id="UserContainer" className="inner-container...