Dynamic Values in React Using JSX Variables and Expressions

Understanding Dynamic Values in React

Dynamic values in React allow you to use JavaScript expressions inside your components. This is useful for displaying dynamic data like variables, calculations, or user inputs in your UI. In React, we use curly braces {} to embed JavaScript expressions directly in our JSX.

What are Dynamic Values?

Dynamic values refer to values that can change depending on variables or expressions. For example, you can use a variable for the text in a component, perform calculations, or even use functions to modify what gets displayed. Dynamic values make your components more flexible and responsive to changes.

How to Use Dynamic Values in JSX

To insert dynamic values into JSX, simply wrap the value or expression in curly braces {}. These can be variables, expressions, or function calls, and they are evaluated before rendering.

Example: Displaying Dynamic Values

// Card.jsx
// This component demonstrates using dynamic values in JSX

const Card = () => {
  // Define dynamic variables
  const title = "Wifi";
  const desc = "Lorem ipsum dolor sit amet, consectetur adipisicing elit.";

  return (
    <>
      <p>{title}</p>       {/* Displays the dynamic title */}
      <p>{desc}</p>       {/* Displays the dynamic description */}
      <span>{1 + 2}</span> {/* Displays the result of the expression */}
    </>
  );
};

export default Card;

In this example, we:

• Created a Card component that uses dynamic variables title and desc.
• Displayed title and desc by wrapping them in curly braces, allowing their values to be dynamically inserted into the component.
• Added a simple expression {1 + 2} that evaluates to 3 and displays this result in the <span> element.

Why Use Dynamic Values in React?

• They allow you to display content based on data, making your components more interactive and data-driven.
• You can use calculations, format data, or use conditional logic within JSX to control what’s shown on the UI.
• Dynamic values help you build flexible components that respond to different data inputs, making them reusable and scalable.

Embedding JavaScript Expressions

You can use JavaScript expressions to perform calculations, call functions, or display conditional content in JSX. Here’s a simple example:

// Example of calculations and conditional rendering

const MathCard = () => {
  const a = 5;
  const b = 10;

  return (
    <>
      <p>Sum: {a + b}</p>       {/* Shows the sum of a and b */}
      <p>Condition: {a > b ? "A is greater" : "B is greater"}</p> {/* Shows conditional message */}
    </>
  );
};

export default MathCard;

In this example, we:

• Calculate the sum of two variables a and b and display the result.
• Use a conditional expression to show a different message based on the comparison of a and b.

Using Dynamic Components in the Main Component

Let’s render the Card and MathCard components in our main App.jsx component to see the dynamic values in action.

// App.jsx
// Main application component

import Card from "./components/Card";
import MathCard from "./components/MathCard";

const App = () => {
  return (
    <div>
      <h1>Dynamic Values in React</h1>
      <Card />        {/* Render Card component with dynamic values */}
      <MathCard />   {/* Render MathCard component with dynamic expressions */}
    </div>
  );
};

export default App;

By running this code, you’ll see how dynamic values and expressions are displayed in real time, making your components interactive and data-responsive.

Key Takeaways

• Dynamic values allow you to use variables, expressions, and conditions inside JSX by wrapping them in curly braces {}.
• This flexibility helps make your React components more interactive and data-driven.
• Using expressions and conditional rendering in JSX enhances the functionality and interactivity of your components.

Learn More

What is jsx in react programming language

Creating your first program in react step by step guide

Folder and file structure react vite installation structure

How to install react.js with npm bun and vite