AI Features
Home
Courses
Understanding Redux: A Beginner's Guide To State Management

Building the User Component

The full implementation and styling of the User component. We will deconstruct the user prop and access each attribute separately.

We'll cover the following...

Up till now, we were rendering a User component within the Sidebar, but this component doesn’t exist yet.

Please create a User.js and User.css file within the root directory. Done that?

Now, here’s the content of the User.js file:

User.js

import React from "react";
import "./User.css";
const User = ({ user }) => {
  const { name, profile_pic, status } = user;
  return (
    <div className="User">
      <img src={profile_pic} alt={name} className="User__pic" />
      <div className="User__details">
        <p className="User__details-name">{name}</p>
        <p className="User__details-status">{status}</p>
      </div>
    </div> 
  );
};
export default User;

Don’t let that big chunk of code fool you. It is actually very easy to read and understand. Have a second look.

The name, profile_pic url and status of the user are obtained from the props via destructuring: **const { name, profile_pic, status } = user;** (line 4).

These values are then used in the return statement for proper rendering, and here’s the result of that:

Ask