The Road to React: The One with Hooks/

...

/

Meet Another React Component

Meet Another React Component

So far we've only been using the App component to create our applications. Let's now learn to make another component.

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
Press + to interact
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 ...