⚠️ This lesson is retired and might contain outdated information.

Style a React List Component

Ian Jones
InstructorIan Jones
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 2 years ago

In this lesson, we style our list component so that we can see who wrote the message and visually distinguish the current viewers messages from other peoples.

Instructor: [0:01] Now that we have comments rendering, let's add a little style. I'm going to move my editor to one side and my browser to another. I'll close these. First, let's get rid of this console log. Then I'm going to switch to comment two and I'll save it.

[0:27] I'm doing this because this comment is made from a fake github account that I created. This comment is made from my current session, and then another comment by the fake github account just so we can see the difference between my comments and someone else's comments.

[0:53] First, let's add style. We'll get rid of those list style is none. Then, we'll add padding, 10px and 20px. Next, let's add a background color. Background, we want to change the background color based on whether or not the current user made the comment or not. We can find that out by going comment.viewerDidAuthor.

[1:35] If the viewer did author, we will use this color. If the viewer didn't author, we will use this color. Next, let's add margin bottom, about four pixels. Then we'll add a border radius of 40 pixels. Next, we'll add a width of 60 percent.

[2:16] Now, we should show who is actually commenting. We'll use an H3, we'll add commentnode.author.log, and we'll wrap this one in a paragraph tag. Next, we want our comments to be on the right and their comments to be on the left.

[2:42] We'll go up to this UL. We'll add style and we'll add a display of flex in a flex direction of column. That won't change anything, but now we can go align self comment node.viewer. If the viewer is the author then we'll do flex end. If the viewer isn't the author, we will use flex start.

[3:17] Now it's looking pretty good. I'll add a little more margin. Let's add six, and let's bring style margin zero.

~ 26 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today