The Road to React: The One with Hooks/

...

/

Lists in React

Lists in React

We’ve rendered a few primitive variables in JSX and now we’ll render a list of items.

We'll cover the following...

We’ll experiment with sample data at first, then we’ll apply that to fetch data from a remote API. First, let’s define the array as a variable. As before, we can define a variable outside or inside the component. The following defines it outside:

Press + to interact
import React from 'react';
const list = [
  {
    title: 'React',
    url: 'https://reactjs.org/',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4,
    objectID: 0,
  },
  {
    title: 'Redux',
    url: 'https://redux.js.org/',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5,
    objectID: 1,
  },
];
function App() { ... }
export default App;

I used a ... here as a placeholder, to keep my code snippet small (without App component implementation details) and focused on the essential parts (the list variable outside of the App component). I will use the ... throughout the rest of this learning experience as a placeholder for code blocks that I have established in previous exercises. If you get lost, you can always verify your code by running it live on the Educative SPA widget below. ...