Displaying User Information on the Profile Page

In this lesson, we’ll create a profile page to display user information. We’ll build a component to display user details and the posts concerning this user, but we’ll also create a page displaying a form for editing user information.

Before starting to build the user profile page, we have to create some components. On the profile page, we are not only displaying information but also the list of posts created by the user. Let’s start by writing the ProfileDetails.jsx component.

Here’s the wireframe to help us with the structure of the component:

In the ProfileDetails component, we're displaying some avatars. At this point of the project, it’s time to get rid of the randomAvatar function. It has been useful up until this point of the project, but we are making a lot of requests, and a state change within the application just calls the function again that returns another random image, which is not something a user of the application might want to see.

Let’s start using the value of the avatar field on the user object, but before that, we have to configure Django to deal with media upload and the avatar field on the user object.

The social media application uses the avatar field, which represents a link to a file that the browser can make a request on and receive the image. Django supports file uploading; we just need to add some configuration to make it effective.

Inside the settings.py ...