How to implement dynamic features in JSX

JSX is more than just templating language for React. I could argue it’s the magic syntax that brings React web applications to life. In reality, it’s nothing but JavaScript disguised as HTML. Still, it has the best features of both JavaScript and HTML and allows you to easily implement dynamic functionalities in your app.
JSX allows you to declaratively build React components and by extension, component trees. Its syntax is very similar in HTML. You can invoke React elements that you probably know from HTML -

, and other standard elements. You can also create and invoke custom components the same way. JSX has the same syntax for setting attributes, props, and other aspects of building the layout in HTML.

In this article, we want to explore how to embed dynamic expressions in JSX.

JavaScript is the main language for writing dynamic features. JSX allows you to embed JS expressions as long as you wrap them with curly braces {}. React knows that everything between curly braces in JSX is a JavaScript expression, and not a literal content of the page. You can pass any JavaScript expression between curly braces – from functions to variables to ternary operators. JSX will evaluate the JavaScript expression and dynamically generate the value.

Component reusability is the key idea behind core React philosophy. For this to work, components should be able to receive different bits of data and ‘adjust’ their functionality, layout, content, or any other aspect of component’s functionality. We pass data to React components via props. These allow you to pass data into components as if they were functions. This way, React facilitates the use of components as building blocks in the application. Sometimes you don't need unique components, but to render the same component a number of times.

Is JSX required?

Using JSX is not a requirement. It’s possible to write highly functional web applications without it, but it would take too long. JSX code is simply more readable and easy to follow. That’s why most React developers prefer to write web applications in JSX.
Browsers do not have built-in capability to understand JSX code.

That’s why most of the time React code goes through compilers and transpilers that ‘translate’ React code to regular JavaScript, HTML, and CSS.

Embed ternary operators in JSX

Ternary operator is the only way to do logical comparisons in JSX. If and switch require multiple lines of code, which JSX does not support. You can still use ternary operators to implement advanced conditions. For example, evaluate two scenarios and specify outcomes for both scenarios.

Ternary operators are one of the most common JavaScript expressions embedded in JSX. You only need to use curly braces {} and write a ternary operator between them. As it is the norm for ternary operators, JavaScript will evaluate the condition and then either return first or second value, depending on whether the condition evaluates to true.

For example, you could have a state variable isLoggedIn that checks whether the user is logged in or not. A ternary operator might evaluate the isLoggedIn variable and if it’s true, display dashboard and all essential components for logged in users to manage their account. If it’s logged out, then JSX should display a general welcome page. You can easily do this using ternary operators in React.