The Road to React: The One with Class Components/

...

/

Complex JavaScript in JSX

Complex JavaScript in JSX

Let's see how to render lists and objects in your JSX!

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:

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

Access this course and 1400+ top-rated courses and projects.