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.

Evaluating JavaScript expressions in JSX

Evaluating JavaScript expressions in JSX - React.js Tutorial

From the course: React Foundations by Pearson

Start my 1-month free trial Buy for my team

Evaluating JavaScript expressions in JSX

“

In the example just now, I showed some simple JSX which had some text. It's also possible to embed JavaScript expressions in the middle of your JSX content, which can make your output parameterized effectively. What you need to do is you need to enclose the JavaScript expressions inside curly brackets. So here's a simple example. I've got an array, data, and it contains a few items, Swansea shirt, Cardiff shirt, Lamborghini. So here is a chunk of, well, this bit here is XML. And inside the XML, you can have JavaScript inside curly brackets. So the curly brackets basically tells Babel to treat it as a JavaScript expression and to evaluate it as a JavaScript expression. So Babel is constantly kind of flipping from JavaScript mode to XML mode. So when Babel starts parsing the code, it'll think, well, this is JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript, JavaScript. And then as soon as it sees the angle bracket, it's now thinking XML. So this is now considered to…

Contents