From the course: React Foundations by Pearson

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Data-driven JSX

Data-driven JSX - React.js Tutorial

From the course: React Foundations by Pearson

Start my 1-month free trial Buy for my team

Data-driven JSX

“

Okay, so in this video, I'm going to show how to have data-driven user interface content used in JSX. The examples so far in this lesson have all been hard-coded lists. I've got a list of a Swansea shirt, and Cardiff shirt, and Lamborghini, and it's all fixed. In reality, you'll be using data to decide what to display. You have an array, for example, that will contain the items to be displayed, and somehow you've got to build content, and we're going to see how to do that using JSX. Based on the data, build content to be displayed. So what we do, basically an extension of what we already know, we use curly brackets to enclose JavaScript code in the middle of our sea of XML. We can have a little island of JavaScript. And inside the curly brackets, we can write as complicated JavaScript as we like to take some data and transform it into XML, which will then be converted into visual content by Babel. So here's an example, which we're going to pursue in this topic. I've got an array of…

Contents