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