CodeBlanks Logo Icon CodeBlanks
Login Register

Assemble the card

Combine the avatar and info list into a ProfileCard component.

Assemble the card

In the last step you'll combine the Avatar and InfoList components inside ProfileCard. This is the final step of the project.

ProfileCard calls Avatar first, then InfoList, inside an <article className="card">. The two small components form a single card.

This structure lets you change Avatar or InfoList independently without touching ProfileCard.

Order of combination

ProfileCard calls the two components in order: Avatar first, then InfoList. This order sets the visual layout: name on top, info below.

Changing the call order changes the card's look. If info comes first, you get a different profile card.

In this project we want Avatar on top, so we call it first.

Practice ProfileCard combination

Complete the skeleton. Write a component called ProfileCard that calls <Avatar /> and <InfoList /> inside <article className="card">. Don't forget to export.

Starter code

App.jsx
// Write the ProfileCard component here
// Avatar and InfoList are already defined

Sample solution

App.jsx
function ProfileCard() {
  return <article className="card"><Avatar /><InfoList /></article>;
}

export default ProfileCard;

Questions and answers

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

1 What does ProfileCard call?

  • Only p
  • Only Header
  • Only Footer
  • Avatar and InfoList Correct answer

Explanation: ProfileCard calls Avatar and InfoList.

2 Card wrapper

Question 
ProfileCard is held inside an ____.
Answer 
ProfileCard is held inside an article.

Explanation: article suits standalone content.

3 The whole project

Term Meaning
Avatar Name and role
InfoList Info list
ProfileCard Combination
article Wrapper

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