Creating Multiple JSX Elements From Data

The course is part of this learning path

Start course

This module introduces you to some of the basic components in React, and what JSX is. 

Learning Objectives 

The objectives of this module are to provide you with an understanding of 

  • What components are
  • What JSX is and why it is used in React JS
  • How to create Functional and Class Components
  • How to add multiple components
  • How to inspect components in the Browser
  • How the in-browser tools work

Intended Audience  

This Learning Path is aimed at all who wish to learn how to use the ReactJS framework.  


It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills. 


We welcome all feedback and suggestions - please contact us at to let us know what you think. 



Useful components are at the heart of React. Often we need to create the same market with some dynamic content. For instance, we might have a bunch of items to display in a list or groups of data to display in table rows. As JSX can be returned from functions, we can create a race of JSX expressions that can be used in the render part of a component. 

In the example shown we have an array of strings that we would like to include in an ordered list. To do this we could use a map function call within the return of our component. But this means our code isn't very clean. The result, however, is what we want, which is each item in the array displayed in a list item element. As you can see in the browser. 

Taking advantage of react's ability to render an array of JSX expressions and JavaScripts array map function which basically lets us take each element in an array, and we turn it into array of modified elements. We can move them up call to outside of the return of our component, making it cleaner. The map function is going to work on the array of list items. 

Passing each element to the function as item and returning a JSX expression that interplays the array out to meant to an ordered list element. Ultimately, populating a new array called item list. We then simply render the item list array in our return. Notice that the console output is showing a warning about keys. This is because react needs to be able to track each dumb element tree renders, so that it can work out if the tree needs to be updated. 

In an array of JSX, there is no identifiable property of each Dom tree it renders. To combat this the React works best if you include a unique key attribute on each of the outer HTML elements in the returned expression. Usually, data will come from a database and have an ID property that could be used. But as the last resort, the index of the array element can be passed into the map function and used as the key value. 

This is what we've done here, however, using the array index can cause rendering issues, if the array is modified and the key is the same as before. React assumes that the Dom element is the same as before, and therefore may not update it. A better alternative would be to use a unique ID generator like those in the NPM packages, UUID and Shortid. You can see, but when the outer HTML element of the JSX expression has a key attribute, the key warning is not shown on the console.

About the Author
Learning Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics