React Dynamic Attributes – web4learners.com

React allows you to make JSX attributes dynamic, meaning their values can come from JavaScript variables, expressions, props, state, objects, functions, or other data.

In normal HTML, you might write a fixed attribute like:

<img src="/images/react.png" alt="React Logo" />

The image path and alternative text are written directly into the JSX.

In React, you can make those values dynamic:

const imageUrl = "/images/react.png";
const imageAlt = "React Logo";

function App() {
  return (
    <img src={imageUrl} alt={imageAlt} />
  );
}

Now React gets the attribute values from JavaScript.

This is extremely useful because real applications rarely use completely static attributes. Images come from APIs, links depend on user data, classes change based on state, buttons become disabled based on conditions, and form values often come from state.

Dynamic attributes allow your React UI to respond to changing data.

What Are Dynamic Attributes?

A dynamic attribute is a JSX attribute whose value is determined by JavaScript.

The basic syntax is:

attribute={expression}

For example:

const imageUrl = "/images/profile.jpg";

<img src={imageUrl} />

Here:

src={imageUrl}

is a dynamic attribute.

The value of src comes from the JavaScript variable imageUrl.

Compare this with a static attribute:

<img src="/images/profile.jpg" />

The difference is:

Static
src="/images/profile.jpg"

Dynamic
src={imageUrl}

Static values are written as strings inside quotes.

Dynamic values use curly braces so React can evaluate the JavaScript expression.

Static vs Dynamic Attributes

Understanding the difference is important.

Static Attribute

function App() {
  return (
    <img
      src="/images/react.png"
      alt="React Logo"
    />
  );
}

The values never change unless you modify the JSX itself.

Dynamic Attribute

function App() {
  const imageUrl = "/images/react.png";
  const altText = "React Logo";

  return (
    <img
      src={imageUrl}
      alt={altText}
    />
  );
}

Now the values can change based on JavaScript data.

For example:

const imageUrl = "/images/vue.png";

The rendered image automatically uses the new value.

Why Dynamic Attributes Are Important

Dynamic attributes are important because React applications are usually data-driven.

Consider an online store.

Every product could have:

{
  name: "Laptop",
  image: "/images/laptop.jpg",
  price: 59999,
  available: true
}

Instead of manually creating HTML for every product, you can use the data:

<img src={product.image} alt={product.name} />

The same component can display hundreds of different products.

Dynamic attributes are commonly used for:

Images
Links
CSS classes
Inline styles
Button states
Form values
Input placeholders
IDs
Accessibility attributes
Data attributes
ARIA attributes
Component props
Conditional UI

Using Variables in Attributes

The simplest way to create a dynamic attribute is to use a variable.

function App() {
  const profileImage = "/images/profile.jpg";

  return (
    <img src={profileImage} alt="Profile" />
  );
}

React evaluates:

profileImage

and uses its value for the src attribute.

You can use multiple dynamic attributes:

function App() {
  const imageUrl = "/images/profile.jpg";
  const imageAlt = "User profile picture";
  const imageWidth = 200;

  return (
    <img
      src={imageUrl}
      alt={imageAlt}
      width={imageWidth}
    />
  );
}

Each attribute receives its value from JavaScript.

Using Expressions in Attributes

You are not limited to simple variables.

Any suitable JavaScript expression can be used.

For example:

function App() {
  const user = {
    name: "Arafat"
  };

  return (
    <img
      src="/images/profile.jpg"
      alt={`${user.name}'s profile picture`}
    />
  );
}

You can also perform calculations:

const width = 100;
const extraSpace = 50;

<img width={width + extraSpace} />

The resulting width is:

The important idea is:

attribute={JavaScript expression}

Dynamic `src` Attribute

The src attribute is one of the most common dynamic attributes in React.

function App() {
  const image = "/images/react-logo.png";

  return <img src={image} alt="React Logo" />;
}

This becomes particularly useful when image information comes from an API.

function Product({ product }) {
  return (
    <img
      src={product.image}
      alt={product.name}
    />
  );
}

If the data is:

const product = {
  name: "Laptop",
  image: "/images/laptop.jpg"
};

React uses:

src={product.image}

and:

alt={product.name}

This allows one component to work with many different products.

Dynamic `alt` Attribute

Alternative text can also be dynamic.

const productName = "Wireless Headphones";

<img
  src="/images/headphones.jpg"
  alt={productName}
/>

You can generate more descriptive text:

<img
  src={product.image}
  alt={`${product.name} product image`}
/>

For a product called Laptop, React produces:

Laptop product image

Dynamic alt values are useful when rendering content from databases or APIs.

Dynamic `href` Attribute

Links can use dynamic URLs.

function App() {
  const website = "https://example.com";

  return (
    <a href={website}>
      Visit Website
    </a>
  );
}

You can also build URLs from data:

function ProductLink({ product }) {
  return (
    <a href={`/products/${product.id}`}>
      View Product
    </a>
  );
}

If the product ID is 25, the resulting URL becomes:

/products/25

This pattern is commonly used for product pages, user profiles, blog posts, and other dynamic routes.

Dynamic `className`

className can also receive dynamic values.

const className = "profile-card";

return (
  <div className={className}>
    Profile
  </div>
);

You can use a condition:

const isActive = true;

return (
  <button className={isActive ? "active" : "inactive"}>
    Profile
  </button>
);

When isActive is true:

active

When it is false:

inactive

You can also combine classes:

const isActive = true;

return (
  <div className={`card ${isActive ? "active" : ""}`}>
    Product
  </div>
);

Dynamic classes are especially useful when UI appearance depends on state.

Dynamic `id` Attribute

IDs can be generated dynamically.

function User({ user }) {
  return (
    <div id={`user-${user.id}`}>
      {user.name}
    </div>
  );
}

If:

user.id

is 42, React creates:

id="user-42"

This can be useful when rendering multiple elements that need unique identifiers.

Dynamic `title` Attribute

The title attribute can also be dynamic.

const productName = "React Course";

return (
  <button title={`Buy ${productName}`}>
    Buy Now
  </button>
);

The browser can display:

Buy React Course

when the user hovers over the button.

Dynamic Boolean Attributes

Some HTML attributes are boolean attributes.

Examples include:

disabled
checked
required
readOnly
multiple
autoFocus

In React, you can control them using JavaScript values.

For example:

const isDisabled = true;

return (
  <button disabled={isDisabled}>
    Submit
  </button>
);

If isDisabled is true, the button is disabled.

If it is false:

const isDisabled = false;

the button is enabled.

This is much more useful than writing:

<button disabled>

because the application can determine the state dynamically.

Dynamic `disabled`

Consider a form:

function App() {
  const isSubmitting = true;

  return (
    <button disabled={isSubmitting}>
      Submit
    </button>
  );
}

When the form is being submitted, the button can be disabled.

In a real application, this value would often come from state:

const [isSubmitting, setIsSubmitting] = useState(false);

Then:

<button disabled={isSubmitting}>
  Submit
</button>

React updates the button whenever the state changes.

Dynamic `checked`

Checkboxes can also receive dynamic values.

function App() {
  const isChecked = true;

  return (
    <input
      type="checkbox"
      checked={isChecked}
      readOnly
    />
  );
}

If isChecked is true, the checkbox is checked.

If it is false, it is unchecked.

In interactive forms, checked is commonly controlled using React state.

Dynamic `required`

You can make a field conditionally required.

const isRequired = true;

return (
  <input
    type="text"
    required={isRequired}
  />
);

This is useful when form requirements depend on user selections or application logic.

Dynamic `value`

Form inputs often use dynamic values.

function App() {
  const username = "Arafat";

  return (
    <input
      type="text"
      value={username}
      readOnly
    />
  );
}

The input displays:

Arafat

When state is used, the value can change as the user interacts with the application.

const [name, setName] = useState("");

return (
  <input
    value={name}
    onChange={(event) => setName(event.target.value)}
  />
);

Here:

value={name}

is a dynamic attribute controlled by React state.

Dynamic `placeholder`

Placeholder text can come from variables.

const placeholder = "Enter your email";

return (
  <input
    type="email"
    placeholder={placeholder}
  />
);

You can also change it based on conditions:

const isSearch = true;

return (
  <input
    placeholder={
      isSearch
        ? "Search products..."
        : "Enter your text..."
    }
  />
);

Dynamic `type`

The input type can be dynamic.

const inputType = "password";

return (
  <input type={inputType} />
);

You can use this to build password visibility controls.

For example:

const [showPassword, setShowPassword] = useState(false);

return (
  <input
    type={showPassword ? "text" : "password"}
  />
);

When showPassword is false, the input behaves as a password field.

When it is true, the password becomes visible.

Dynamic Inline Styles

The style attribute can receive a JavaScript object.

const textColor = "blue";

return (
  <p style={{ color: textColor }}>
    Hello React
  </p>
);

The outer curly braces indicate a JavaScript expression.

The inner curly braces create the style object.

You can also make multiple styles dynamic:

const color = "blue";
const fontSize = 20;

return (
  <p
    style={{
      color: color,
      fontSize: fontSize
    }}
  >
    Hello React
  </p>
);

Object shorthand allows you to simplify this:

style={{
  color,
  fontSize
}}

Dynamic Attributes With Ternary Expressions

Ternary expressions are useful when an attribute has two possible values.

const isActive = true;

return (
  <button
    className={isActive ? "active" : "inactive"}
  >
    Account
  </button>
);

Another example:

const isExternal = true;

return (
  <a
    href={isExternal ? externalUrl : "/about"}
  >
    About
  </a>
);

The attribute value is selected dynamically.

Dynamic Attributes With Logical `&&`

Logical && can also be used in attribute-related logic, although it is generally more useful for rendering elements.

For example:

const imageUrl = null;

return (
  <div>
    {imageUrl && (
      <img src={imageUrl} alt="Profile" />
    )}
  </div>
);

The image is rendered only when imageUrl has a truthy value.

This can prevent an image element from being rendered when no image is available.

Be careful when the left side can be 0, because 0 && ... evaluates to 0.

Dynamic Data Attributes

HTML supports custom data-* attributes.

React allows them as well.

const productId = 101;

return (
  <div data-product-id={productId}>
    React Course
  </div>
);

The rendered HTML contains:

data-product-id="101"

You can also use multiple data attributes:

<div
  data-product-id={product.id}
  data-category={product.category}
>
  {product.name}
</div>

These attributes are useful for storing custom metadata associated with an element.

Dynamic ARIA Attributes

Accessibility attributes can also be dynamic.

For example:

const isExpanded = true;

return (
  <button aria-expanded={isExpanded}>
    Menu
  </button>
);

The value changes according to the application’s state.

Another example:

const hasError = true;

return (
  <input
    aria-invalid={hasError}
  />
);

Dynamic ARIA attributes are particularly important when building accessible interactive components.

Dynamic Attributes From Props

One of the most important patterns is passing attribute values through props.

function ProfileImage({ image, name }) {
  return (
    <img
      src={image}
      alt={name}
    />
  );
}

The parent component can provide different values:

<ProfileImage
  image="/images/user1.jpg"
  name="Arafat"
/>

<ProfileImage
  image="/images/user2.jpg"
  name="Rahul"
/>

The component remains reusable because the attribute values come from props.

Passing Attributes to Custom Components

Dynamic values can also be passed to your own components.

function Button({ text, disabled }) {
  return (
    <button disabled={disabled}>
      {text}
    </button>
  );
}

Then:

<Button
  text="Submit"
  disabled={true}
/>

The component receives:

disabled

as a prop and passes it to the actual HTML button.

This pattern is fundamental to reusable React components.

Passing Multiple Dynamic Attributes

You can pass many dynamic values at once.

function ProductImage({
  src,
  alt,
  width,
  height
}) {
  return (
    <img
      src={src}
      alt={alt}
      width={width}
      height={height}
    />
  );
}

Then:

<ProductImage
  src="/images/laptop.jpg"
  alt="Laptop"
  width={400}
  height={300}
/>

The component receives each value through props.

Dynamic Attributes From Objects

Sometimes your data already contains the attributes you need.

const product = {
  image: "/images/laptop.jpg",
  name: "Laptop",
  width: 400
};

return (
  <img
    src={product.image}
    alt={product.name}
    width={product.width}
  />
);

This approach is common when data comes from an API.

For example:

const user = {
  avatar: "/images/user.jpg",
  name: "Arafat"
};

Then:

<img
  src={user.avatar}
  alt={`${user.name} profile picture`}
/>

Using the Spread Attribute Syntax

React also supports the JSX spread syntax.

Suppose you have:

const imageProps = {
  src: "/images/react.png",
  alt: "React Logo",
  width: 200
};

You can pass all of these attributes using:

<img {...imageProps} />

This is equivalent to:

<img
  src={imageProps.src}
  alt={imageProps.alt}
  width={imageProps.width}
/>

Spread syntax is useful when you already have an object containing props or attributes.

However, it should be used carefully because spreading large or unknown objects can make it less obvious which attributes a component receives.

Overriding Spread Attributes

The order of attributes matters.

Consider:

const props = {
  className: "card",
  title: "Product"
};

return (
  <div
    {...props}
    className="featured-card"
  >
    Product
  </div>
);

The later className takes precedence.

So the resulting class is:

featured-card

If you reverse the order:

<div
  className="featured-card"
  {...props}
>
  Product
</div>

the value from props can override it.

This is an important detail when using spread syntax.

Dynamic Attributes With State

Dynamic attributes become particularly powerful when combined with React state.

Consider a password field:

import { useState } from "react";

function PasswordInput() {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div>
      <input
        type={showPassword ? "text" : "password"}
        placeholder="Enter password"
      />

      <button
        onClick={() => setShowPassword(!showPassword)}
      >
        {showPassword ? "Hide" : "Show"}
      </button>
    </div>
  );
}

The type attribute changes dynamically:

type={showPassword ? "text" : "password"}

This demonstrates an important React pattern:

State
  ↓
Expression
  ↓
Dynamic attribute
  ↓
Updated UI

Dynamic Attributes With API Data

Dynamic attributes are especially common when data comes from an API.

Imagine an API returns:

const product = {
  id: 101,
  name: "Wireless Mouse",
  image: "https://example.com/mouse.jpg",
  url: "/products/101"
};

A component can use that data:

function ProductCard({ product }) {
  return (
    <article>
      <img
        src={product.image}
        alt={product.name}
      />

      <h2>{product.name}</h2>

      <a href={product.url}>
        View Product
      </a>
    </article>
  );
}

The component does not need to know the exact product in advance.

It simply receives data and dynamically applies it to the attributes.

This is how React components can display large amounts of real-world data efficiently.

Common Mistakes

Using Quotes for JavaScript Variables

Incorrect:

const image = "/images/react.png";

<img src="image" />

This tells React that "image" is literally the text value.

Correct:

<img src={image} />

Using Curly Braces for Plain Text

You don’t need curly braces for ordinary static text.

This is unnecessary:

<h1>{"Welcome to React"}</h1>

Although it works, this is simpler:

<h1>Welcome to React</h1>

Use curly braces when you need a JavaScript expression.

Forgetting the Difference Between `class` and `className`

In JSX, use:

<div className="card">

not:

<div class="card">

For dynamic classes:

<div className={className}>

Incorrect Boolean Attribute Logic

Avoid unnecessarily converting boolean values into strings:

<button disabled={"true"}>

Use an actual boolean:

<button disabled={true}>

Or, more commonly:

<button disabled={isSubmitting}>

Passing an Object Where a String Is Expected

For example, an image src expects a URL-like value:

<img src={imageUrl} />

If imageUrl is actually an entire object, the result will not be what you intended.

Instead, access the correct property:

<img src={product.image} />

Overusing Spread Attributes

This:

<div {...props}>

can be convenient, but it can also hide which attributes are being passed.

For important components, explicit props are often easier to understand:

<div
  className={props.className}
  title={props.title}
>

Use spread syntax when it genuinely improves the component.

Best Practices

Use Curly Braces Only When Needed

Static:

<button className="primary">
  Save
</button>

Dynamic:

<button className={buttonClass}>
  Save
</button>

Don’t make static values unnecessarily dynamic.

Give Dynamic Values Meaningful Names

Prefer:

const profileImage = user.avatar;

over:

const x = user.avatar;

Then:

<img src={profileImage} alt={user.name} />

This makes your JSX easier to understand.

Keep Complex Expressions Outside JSX

Instead of:

<img
  src={
    user.profile
      ? user.profile.avatar
      : "/images/default.jpg"
  }
/>

you can prepare the value:

const profileImage =
  user.profile?.avatar || "/images/default.jpg";

return (
  <img
    src={profileImage}
    alt={user.name}
  />
);

This keeps the JSX cleaner.

Use State for Interactive Attributes

If an attribute needs to change because of user interaction, React state is usually the appropriate solution.

For example:

const [disabled, setDisabled] = useState(false);

Then:

<button disabled={disabled}>
  Submit
</button>

React updates the attribute when the state changes.

Dynamic Attributes vs HTML Attributes

Dynamic attributes are still based on HTML attributes, but React allows their values to be controlled by JavaScript.

HTML/JSX	Dynamic React
`src="/image.jpg"`	`src={imageUrl}`
`href="/about"`	`href={url}`
`className="card"`	`className={className}`
`disabled`	`disabled={isDisabled}`
`value="Arafat"`	`value={name}`
`title="Profile"`	`title={title}`
`width="300"`	`width={imageWidth}`

The main difference is where the value comes from.

Static attributes contain fixed values.

Dynamic attributes obtain their values from JavaScript.

Complete Practical Example

Here is a product card that uses several dynamic attributes:

function ProductCard({ product }) {
  const buttonClass = product.inStock
    ? "buy-button"
    : "disabled-button";

  return (
    <article
      id={`product-${product.id}`}
      className="product-card"
      data-product-id={product.id}
    >
      <img
        src={product.image}
        alt={`${product.name} product image`}
      />

      <h2>{product.name}</h2>

      <p>₹{product.price}</p>

      <a href={`/products/${product.id}`}>
        View Details
      </a>

      <button
        className={buttonClass}
        disabled={!product.inStock}
      >
        {product.inStock ? "Buy Now" : "Out of Stock"}
      </button>
    </article>
  );
}

Example data:

const product = {
  id: 101,
  name: "Wireless Headphones",
  image: "/images/headphones.jpg",
  price: 2499,
  inStock: true
};

Then:

<ProductCard product={product} />

This single component dynamically controls:

id={...}

className={...}

data-product-id={...}

src={...}

alt={...}

href={...}

disabled={...}

The component can therefore display many different products without rewriting the JSX.

Image Placement

Place this image immediately after the section “What Are Dynamic Attributes?”

Create a 16:9 React educational infographic showing how JavaScript data flows into JSX attributes.

The visual should show:

JavaScript Data
      ↓
Variable / Props / State
      ↓
JSX Expression { }
      ↓
Dynamic Attribute
      ↓
Rendered HTML Element

Include concise examples such as:

<img src={imageUrl} />

<button disabled={isDisabled}>

<a href={profileUrl}>

Show a code editor on one side and the resulting browser UI on the other. Use a clean modern React/developer education style with minimal text.

Caption: React dynamic attributes allow JavaScript data to control HTML element properties.

Alt text: React dynamic attributes showing JavaScript variables, props, and state controlling JSX attributes.

Practice Exercise

Create a reusable ProductCard component using this data:

const product = {
  id: 101,
  name: "Wireless Headphones",
  image: "/images/headphones.jpg",
  price: 2499,
  inStock: true
};

Your component should dynamically render:

The product image using src
The product name using alt
The product name inside an <h2>
The price
A dynamic product ID
A product link using the product ID
A button that becomes disabled when the product is out of stock

Use:

disabled={!product.inStock}

for the button.

Then use a ternary expression to display:

Buy Now

when the product is available, or:

Out of Stock

when it is unavailable.

Bonus Challenge

Add a dynamic CSS class:

product-card

for an available product and:

product-card unavailable

for an unavailable product.

Try implementing it using:

className={
  product.inStock
    ? "product-card"
    : "product-card unavailable"
}

Quick Cheat Sheet

Syntax	Purpose
`src={imageUrl}`	Dynamic image URL
`href={url}`	Dynamic link
`alt={altText}`	Dynamic alternative text
`className={className}`	Dynamic CSS class
`id={id}`	Dynamic element ID
`title={title}`	Dynamic title
`disabled={isDisabled}`	Dynamic button state
`checked={isChecked}`	Dynamic checkbox state
`value={value}`	Dynamic input value
`placeholder={text}`	Dynamic placeholder
`style={styles}`	Dynamic style object
`data-id={id}`	Dynamic custom data attribute
`aria-expanded={isExpanded}`	Dynamic accessibility attribute
`type={inputType}`	Dynamic input type
`{...props}`	Spread multiple dynamic props

Key Takeaways

React allows JSX attributes to receive values from JavaScript.
Dynamic attributes use curly braces {}.
Variables, expressions, props, and state can control attribute values.
Common dynamic attributes include src, href, className, disabled, value, checked, and style.
Boolean attributes should receive actual boolean values.
Dynamic attributes are especially useful when rendering data from APIs.
Props allow reusable components to receive dynamic attribute values.
State allows attributes to change in response to user interaction.
Ternary expressions are useful when an attribute needs one of two values.
Spread syntax can pass multiple attributes from an object.
Keep complicated expressions outside JSX when they reduce readability.
Dynamic attributes are a major part of building reusable, data-driven React components.

What Are Dynamic Attributes?

Static vs Dynamic Attributes

Static Attribute

Dynamic Attribute

Why Dynamic Attributes Are Important

Using Variables in Attributes

Using Expressions in Attributes

Dynamic src Attribute

Dynamic alt Attribute

Dynamic href Attribute

Dynamic className

Dynamic id Attribute

Dynamic title Attribute

Dynamic Boolean Attributes

Dynamic disabled

Dynamic checked

Dynamic required

Dynamic value

Dynamic placeholder

Dynamic type

Dynamic Inline Styles

Dynamic Attributes With Ternary Expressions

Dynamic Attributes With Logical &&

Dynamic Data Attributes

Dynamic ARIA Attributes

Dynamic Attributes From Props

Passing Attributes to Custom Components

Passing Multiple Dynamic Attributes

Dynamic Attributes From Objects

Using the Spread Attribute Syntax

Overriding Spread Attributes

Dynamic Attributes With State

Dynamic Attributes With API Data

Common Mistakes

Using Quotes for JavaScript Variables

Using Curly Braces for Plain Text

Forgetting the Difference Between class and className

Incorrect Boolean Attribute Logic

Passing an Object Where a String Is Expected

Overusing Spread Attributes

Best Practices

Use Curly Braces Only When Needed

Give Dynamic Values Meaningful Names

Keep Complex Expressions Outside JSX

Use State for Interactive Attributes

Dynamic Attributes vs HTML Attributes

Complete Practical Example

Image Placement

Practice Exercise

Bonus Challenge

Quick Cheat Sheet

Key Takeaways

Dynamic `src` Attribute

Dynamic `alt` Attribute

Dynamic `href` Attribute

Dynamic `className`

Dynamic `id` Attribute

Dynamic `title` Attribute

Dynamic `disabled`

Dynamic `checked`

Dynamic `required`

Dynamic `value`

Dynamic `placeholder`

Dynamic `type`

Dynamic Attributes With Logical `&&`

Forgetting the Difference Between `class` and `className`