Injecting Data Using Curly Braces {} in React

I have received several personalised emails such as “Hi Srishti, Thanks for placing your order!” Have you ever got an email like this after placing an order on an e-commerce website? What do you think of it? Do you think that they have an executive who sends customised emails to each and every customer? Well, if that happens to be the case, this is an excessive amount of work when there are tens of thousands of customers placing orders every second.

So, what would they do then? You may have thought of the solution by now. They must have some sort of an email template that consists of common data for all customers. At some places, the data is replaced by customer-specific details, and this is how the customers get to see emails as if they have been written specifically for them.

Let’s understand how to do this in React by taking a simple example of adding two numbers and dynamically injecting their sum.

Thus, you have learnt that curly braces {} are used as a special syntax in React. This can be used to evaluate a JavaScript expression during compilation. The expression can be a variable, a function, an object, an arithmetic calculation, logical evaluation, or any code snippet that returns some value.

Example:

Code Snippet:

let moduleName="React";
<span>Learning {moduleName} is so much fun!</span>

Output:

Learning React is so much fun!