React

Modern React From The Beginning EP3: Working With Lists


Subscribe On YouTube

Episodes

Defining A List Of Objects

In the last episode we’ve learnt more about React components and JSX code. In this next part of the Modern React From The Beginning tutorial series I’d like to introduce you to how to work with lists in React. Let’s again use file src/App.js to add a simple list as an array of objects outside the component implementation:

import React from 'react';

const courses = [
  {
    title: "React - The Complete Guide (incl Hooks, React Router, Redux)",
    author: "Maximilian Schwarzmülller",
    hours_video: 40.5,
    number_of_lectures: 490,
    rating: 4.6,
    url: "https://codingthesmartway.com/courses/react-complete-guide/"
  },
  {
    title: "Modern React with Redux",
    author: "Stephen Grider",
    hours_video: 47.5,
    number_of_lectures: 488,
    rating: 4.6,
    url: "https://codingthesmartway.com/courses/modern-react-with-redux/"
  },
  {
    title: "The Complete React Developer Course (w/ Hooks and Redux)",
    author: "Andrew Mead",
    hours_video: 39,
    number_of_lectures: 200,
    rating: 4.7,
    url: "http://codingthesmartway.net/courses/complete-react-web-app-developer/"
  }
];

function App() {
    return (
        <div>
            <h1>Hello World</h1> 
        </div>
    ); 
}
export default App;

Rendering List Items In The JSX Code

Now that we’ve defined a courses array outside of App component let’s use this list of data in the JSX code of App component. In the first step let’s output the title information of each course:

import React from 'react';

const courses = [
  {
    title: "React - The Complete Guide (incl Hooks, React Router, Redux)",
    author: "Maximilian Schwarzmülller",
    hours_video: 40.5,
    number_of_lectures: 490,
    rating: 4.6,
    url: "https://codingthesmartway.com/courses/react-complete-guide/"
  },
  {
    title: "Modern React with Redux",
    author: "Stephen Grider",
    hours_video: 47.5,
    number_of_lectures: 488,
    rating: 4.6,
    url: "https://codingthesmartway.com/courses/modern-react-with-redux/"
  },
  {
    title: "The Complete React Developer Course (w/ Hooks and Redux)",
    author: "Andrew Mead",
    hours_video: 39,
    number_of_lectures: 200,
    rating: 4.7,
    url: "http://codingthesmartway.net/courses/complete-react-web-app-developer/"
  }
];

function App() {

    return (
        <div>
            <h1>List of Courses</h1>
            <hr />
            {courses.map(function(course) {
              return <div>{course.title}</div>;
            })} 
        </div>
    ); 
}
export default App;

To iterate through the list of courses we’re using the JavaScript map function inside an expression block in the JSX code. A function is passed into the call of map. This function is then executed for each item in the courses array. The current course object is made available inside that function by the course parameter. The course title can therefore be accessed by using course.title.

Starting the development web server again by using command

$ npm start

should give us the following result in the browser:

10.png

Setting The Key Property

When adding code to render list elements (like we did before) it’s recommended to also add the key property and assign a unique value. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identify.

So let’s add a id property to our course objects inside the courses array and then use this property value to set the key in the JSX code:

import React from 'react';

const courses = [
  {
    id: 1,
    title: "React - The Complete Guide (incl Hooks, React Router, Redux)",
    author: "Maximilian Schwarzmülller",
    hours_video: 40.5,
    number_of_lectures: 490,
    rating: 4.6,
    url: "https://codingthesmartway.com/courses/react-complete-guide/"
  },
  {
    id: 2,
    title: "Modern React with Redux",
    author: "Stephen Grider",
    hours_video: 47.5,
    number_of_lectures: 488,
    rating: 4.6,
    url: "https://codingthesmartway.com/courses/modern-react-with-redux/"
  },
  {
    id: 3,
    title: "The Complete React Developer Course (w/ Hooks and Redux)",
    author: "Andrew Mead",
    hours_video: 39,
    number_of_lectures: 200,
    rating: 4.7,
    url: "http://codingthesmartway.net/courses/complete-react-web-app-developer/"
  }
];

function App() {
    return (
        <div>
            <h1>List of Courses</h1>
            <hr />
            {courses.map(function(course) {
              return (
                <div key={course.id}>
                  {course.title}
                </div>
              );
            })} 
        </div>
    ); 
}
export default App;

Extending The List Output

So far we’ve only printed out the title of each course. Of course we’re able to further extend our JSX code to output all course properties. Therefore we’re using the expression syntax multiple times:

...
function App() {
    return (
        <div>
            <h1>List of Courses</h1>
            <hr />
            {courses.map(function(course) {
              return (
                <div key={course.id}>
                  <span>
                    <a href={course.url}><h4>{course.title}</h4></a>
                  </span>
                  <span>by <strong>{course.author}</strong></span>
                  <span> | Video Hours: {course.hours_video}</span>
                  <span> | Number of Lectures: {course.number_of_lectures}</span>
                  <span> | Rating: {course.rating}</span>
                  <br/><br/>
                </div>
              );
            })} 
        </div>
    ); 
}
export default App;

The output in the browser should then correspond to what you can see in the following screenshot:

20.png

What’s Next

Up until now we’ve only used one component in our React application: App component. If the application grows and gets more complex it makes sense to split up the code in multiple components. How to work with multiple components in React will be covered in the next episode.

Advertisement: Top 3 React Online Courses

If you want to dive deeper and become a React pro also consider taking one of the following great online courses.

React – The Complete Guide (incl Hooks, React Router, Redux)*
Dive in and learn React.js from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!

Go To Course*

Modern React with Redux*
Master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks!

Go To Course*

The Complete React Developer Course (w/ Hooks and Redux)*
Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.