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

Building the User Component

Explore how to build a User component in a Redux-based React app by extracting user data from props and applying CSS styling. Understand how to manage component rendering, optimize state initialization, and ensure responsiveness for different screen sizes.

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

Javascript (babel-node)
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: