Search⌘ K
Home
Courses
The Road to React: The One with Hooks

Meet Another React Component

Explore how to build React components and organize them into component trees. This lesson helps you understand the roles of parent, child, and sibling components, enabling you to structure larger React applications effectively by splitting responsibilities across standalone components.

We'll cover the following...

We used the App component in the last lesson to express everything needed to render our list in JSX, and it should scale with your needs and eventually handle more complex tasks. To help with this, we’ll split some of its responsibilities into a standalone List component:

%0 node_1 React Components node_2 App node_1->node_2 node_3 List node_1->node_3
Node.js
const list = [ ... ];
function App() { ... }
function List() {
  return list.map(function(item) {
    return (
      <div key={item.objectID}>
        <span>
          <a href={item.url}>{item.title}</a>
        </span>
        <span>{item.author}</span>
        <span>{item.num_comments}</span>
        <span>{item.points}</span>
      </div>
    );
  });
}

Optional: If this component looks odd, because the outermost part of the returned JSX starts with JavaScript. We could use ...