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

Lists in React

Explore how to use React to render dynamic lists from JavaScript arrays. Learn to map data items to JSX elements, assign unique keys for optimal rendering, and display multiple item properties dynamically. Understand best practices for handling lists and keys to manage component updates effectively.

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:

Node.js
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. ...