3.12 dynamic data output and use dexpressures in js

Once the expense date, the car insurance label and the price are in place, we now feed real data into JSX. The idea is simple: declare a few const values built from JavaScript's native Date constructor, then inject those expressions directly inside the markup using curly braces.

Above the component's return we add three constants. The first one stores a date through the built-in Date object — note the capital D. The second one holds the title, here Car Insurance. The third one keeps the amount. The corresponding code looks like this: 

const expenseDate = new Date(2022, 1, 28);
const expenseTitle = 'Car Insurance';
const expenseAmount = 294.67;

If your editor underlines anything for a brief moment, do not worry — once the constants are referenced from the returned JSX, the warning disappears. Back inside the return block, we modify the markup so it consumes those constants instead of static text.

Injecting the expressions in the JSX

  • For the date, remove the hardcoded value and put {expenseDate.toISOString()} inside the existing wrapper.
  • For the h2 title, keep the structure but replace its content with {expenseTitle}.
  • For the amount, remove the static price and place ${expenseAmount} inside the price element.

After saving you can see the expense date, the expense title and the expense amount rendered exactly from the constants. We are no longer hardcoding strings in the JSX; we read whatever JavaScript value sits in the surrounding scope. With this expression syntax working, we are ready to move on to the next step of the project.

Summary

This lesson teaches how to create and display dynamic expense data in a React component. Students learn to use JavaScript's Date constructor to store dates and template literals with ${} syntax to inject dynamic values (amount, title, date) directly into JSX markup. The lesson demonstrates converting date objects to strings and binding multiple data properties to UI elements for real-time rendering.

Key points

  • Use the Date constructor (new Date()) to create proper date objects instead of strings, enabling date manipulation and formatting
  • Template literals with ${variableName} syntax allow clean, readable embedding of variables directly into JSX without string concatenation
  • Apply toString() method on date objects to convert them into human-readable string format for display
  • Store multiple related data properties (date, title, amount) as separate constants and reference them independently in JSX
  • Template expressions work seamlessly in h1/h2 tags and other HTML elements within JSX return statements

FAQ

Why use the Date constructor instead of storing the date as a string?

The Date constructor creates a Date object that can be manipulated, formatted, and processed programmatically. Strings are static; Date objects provide built-in methods like toString(), getTime(), and more for flexible date handling.

What is the difference between template literals and string concatenation?

Template literals (backticks with ${}) embed variables directly and are more readable. String concatenation (+) requires switching between quotes and operators, making the code harder to read and more error-prone.

Can I use template expressions in any JSX element?

Yes, template expressions with ${} work in any text content within JSX—h1, h2, p, span, and other elements. They cannot be used for HTML attribute values; use separate variable references for those.