CodeBlanks Logo Icon CodeBlanks
Login Register

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 <p> 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.

Practice Complete the Avatar

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

Starter code

App.jsx
// Write the Avatar component here

Sample solution

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

export default Avatar;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What does the Avatar show?

  • Only a date
  • Name and role Correct answer
  • Only a button
  • Only an image

Explanation: The Avatar shows name and role.

2 Avatar skeleton

Question 
The avatar sits inside a ____.
Answer 
The avatar sits inside a div.

Explanation: The avatar sits inside a div.

3 Match the Avatar pieces

Term Meaning
div Wrapper
className Class
p Line
export Export

All lessons in Beginner

1 React intro

  1. What is React?
  2. Setup and Vite
  3. Your first component
  4. Summary - React intro

2 JSX basics

  1. What is JSX?
  2. Expressions and curly braces
  3. Attributes and className
  4. Summary - JSX basics

3 Components

  1. Component logic
  2. Component tree
  3. Naming rules
  4. Summary - Components

4 Profile card

  1. Project: Profile card
  2. Avatar component
  3. Info list
  4. Assemble the card

5 Props

  1. What are props?
  2. Reading props
  3. Children prop
  4. Default props
  5. Summary - Props

6 Conditional rendering

  1. What is conditional rendering?
  2. Ternary operator
  3. Logical AND (&&)
  4. Early return
  5. Summary - Conditional rendering

7 List rendering

  1. What is list rendering?
  2. The key attribute
  3. Array to components
  4. Filtering and sorting
  5. Summary - List rendering

8 Shopping list

  1. Project: Shopping list
  2. Item component
  3. List body
  4. Empty state

9 Events

  1. Events
  2. The event object
  3. Form events
  4. Summary - Events

10 useState

  1. What is state?
  2. The useState call
  3. Updating state
  4. Multiple state values
  5. Summary - useState

11 Counter app

  1. Project: Counter app
  2. Number and buttons
  3. Decrement and reset
  4. Boundary control

12 Forms

  1. Controlled input
  2. Form submission
  3. Multiple fields
  4. Summary - Forms

13 Styling

  1. Styling with CSS
  2. CSS Modules
  3. Inline styles
  4. Summary - Styling

14 styled-components

  1. What is styled-components?
  2. Styling with props
  3. Using themes
  4. Summary - styled-components

15 useReducer

  1. What is useReducer?
  2. Action and state
  3. useState vs useReducer
  4. Summary - useReducer

16 useEffect

  1. What is useEffect?
  2. Dependency array
  3. Cleanup function
  4. Summary - useEffect

17 Context

  1. What is context?
  2. createContext
  3. Provider and useContext
  4. Summary - Context

18 useRef

  1. What is useRef?
  2. DOM access
  3. Timer example
  4. Summary - useRef

19 Todo app

  1. Project: Todo app
  2. Todo entry form
  3. Todo list
  4. Filter and summary

20 Beginner final

  1. Challenge: Weather card
  2. Challenge: Cart summary
  3. Challenge: Counter and reset
  4. Challenge: Dropdown menu