JSX literals expressions

Turn JavaScript values into readable UI.

Read the explanation, run the worked example, then complete the matching Examples and Assignments tabs. Your original materials remain available alongside these notes.

Understand the idea

JSX describes the elements React should render. Text outside braces is literal text; braces evaluate a JavaScript expression. An expression produces a value, so arithmetic, a function call, map, filter and a ternary fit inside braces. A statement such as if or for belongs before return. JSX is transformed by the project build tool; it is not a string of HTML.

For your number and string exercises, calculate the value first and then display it. Math.sqrt(14) returns a decimal; Math.trunc(134.42) returns 134. String methods return new strings. Arrays of numbers can render next to one another without separators, so use join for one line or map for separate elements. An object cannot be rendered directly: choose its properties.

Your long worksheet also introduces arrays, images and student records. Complete the expressions first, then use the UI Generation and Conditional UI lessons for map/filter, tables, cards and galleries. Use reduce with an initial value so an empty array still has a valid total.

Data / props ↓ JavaScript expression ↓ JSX elements ↓ Visible UI

Run the example

Use a separate React practice project with a Node.js version supported by Vite. Create it once with these commands, then use its development URL. Do not paste this into the Edupoly website’s own source files.

npm create vite@latest react-practice -- --template react
cd react-practice
npm install
npm run dev

Replace src/App.jsx with the following complete example. Keep Vite’s generated src/main.jsx entry point.

src/App.jsx

export default function App() {
  const name = 'praveen';
  const numbers = [10, 25, 30];
  return <main>
    <h1>{name.toUpperCase()}</h1>
    <p>Length: {name.length}; reverse: {[...name].reverse().join('')}</p>
    <p>Square root: {Math.sqrt(14).toFixed(2)}</p>
    <p>Integer part: {Math.trunc(134.42)}</p>
    <p>Total: {numbers.reduce((sum, n) => sum + n, 0)}</p>
    <p>Values: {numbers.join(', ')}</p>
  </main>;
}

Apply this to your assignments

Work through your expression worksheet in groups: arithmetic, string transformations, array transformations, then student objects. Check an empty array, zero, and a negative number. Use [...values].sort((a,b) => a-b) for numeric sorting and [...a,...b] for merging.

Your existing examples

• Render jsx element in html
• Evaluate expression in jsx element in html
• Evaluate string concatination in jsx element in html
• Print the sum of all numbers of array in JSX using reduce method
• Print the sum of all numbers of array in JSX using reduce method
• Evaluate logical expression in jsx element in html
• Print array of numbers in jsx element
• Print integer part of the number 134.42 in JSX

Open the Examples tab to run or inspect these supplied projects. Their original links are preserved.

Open Assignments for your complete original worksheet. Use the assignment workspace link to submit completed work.

Common mistakes

Booleans do not print as visible text; use String(value) when inspecting them. Do not use an object itself as a child. A numeric sort without a comparator sorts by string order.

Check your understanding

1. Predict the output before running the example, then compare it with the result panel.
2. Explain which value each expression reads and which action changes it.
3. Try the boundary cases listed in the practice task and record what you observe.
4. Rebuild one matching assignment without copying, then compare behavior with the original example.

Reference

Official documentation for this topic · Vite setup requirements