Info list

Collect the profile details into a list.

Info list

Now we'll add the InfoList component. It will sit at the bottom of the profile card and show a few info items as a list: location, website, follower count and so on.

For lists we use HTML's <ul> and <li> tags. In JSX these tags are written the same as HTML.

Making InfoList a separate component makes it easy to change the list contents later.

List items

Each piece of info goes inside an <li>. For example, <li>İstanbul</li> shows the city. Multiple <li> tags are written side by side.

The list contents come from a real profile: location, website, follower count. We use fixed values in the project; later we'll make them dynamic with props.

Keeping the list in a separate component keeps ProfileCard clean.

Exercise InfoList component

Complete the skeleton. Write a component called InfoList that returns <ul className="info"> with three <li> items: İstanbul, codeblanks.com, 1200. Don't forget to export.

Show example solution

function InfoList() {
  return <ul className="info"><li>İstanbul</li><li>codeblanks.com</li><li>1200</li></ul>;
}

export default InfoList;

Test yourself

Which tags does the info list use?
- form and input
- table and tr
- ul and li
- header and footer
Show answer

ul and li — Others are different structures.

List wrapper

The info list starts with a ____.

Show answer

The info list starts with a ul.

Match the list pieces

ul

Wrapper
li

Item
İstanbul

Value
InfoList

Component

Next lesson: Assemble the card

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies