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

Complex JavaScript in JSX

Explore how to render lists in React using complex JavaScript within JSX. Understand using the map function to display list items with multiple properties and apply stable keys for efficient rendering. Learn to combine JavaScript and HTML effectively to build dynamic user interfaces.

We'll cover the following...

So far, you have rendered a few primitive variables in your JSX. Now, we will render a list of items. The list will contain sample data in the beginning, but later we will learn how to fetch the data from an external API.

First, you have to define the list of items:

Javascript (babel-node)
import React, { Component } from 'react';
import './App.css';
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,
  },
];
class App extends Component {
  ...
}

The sample data represents information we will fetch from an API later on. Items in this list each have a title, a URL, and an author, as well an identifier, points (which indicate how popular an article is), and a count of comments.

Now you can use the ...