Avatar component

Write the avatar component and show a name and role.

Avatar component

In the previous lesson you wrote the Avatar skeleton. Now you'll improve it to show the name and role together. The avatar sits at the centre of the card.

The avatar is a small block at the top of the profile card: a name, a role and optionally an image. We skip the image and use only text in this project.

In later lessons we'll place this Avatar inside ProfileCard.

Avatar styling

Giving the avatar className="avatar" lets us style it with CSS. We don't write styles in this project but add className to keep the skeleton ready.

The two  tags inside the component show the name and role on separate lines. We'll replace this simple structure with a list in later lessons.

Now let's write the code and export the Avatar.

Exercise Complete the Avatar

Complete the skeleton. Write a component called Avatar that returns <div className="avatar"> with Ayşe and Geliştirici inside. Don't forget to export.

Show example solution

function Avatar() {
  return <div className="avatar"><p>Ayşe</p><p>Geliştirici</p></div>;
}

export default Avatar;

Test yourself

What does the Avatar show?
- Only a date
- Name and role
- Only a button
- Only an image
Show answer

Name and role — The Avatar shows name and role.

Avatar skeleton

The avatar sits inside a ____.

Show answer

The avatar sits inside a div.

Match the Avatar pieces

div

Wrapper
className

Class
p

Line
export

Export

Next lesson: Info list

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies