React JSX Attributes Practice Questions with Solutions

By /

Introduction

JSX attributes are used to provide additional information to React elements. They are similar to HTML attributes, but JSX follows JavaScript-based naming rules for many attributes. You can use attributes such as className, id, src, alt, and onClick to control how elements look and behave. In this chapter, you will practice basic JSX attributes, dynamic attribute values, CSS classes, images, links, boolean attributes, and JavaScript expressions inside attributes. React JSX Attributes practice questions with solutions help to understand the concepts.

1. What are JSX Attributes?

JSX attributes provide additional information or properties to JSX elements.

For example:

function App() {
  return (
    <h1 className="title">
      Welcome to React
    </h1>
  );
}

Here:

className="title"

is a JSX attribute.

Other common attributes include:

id
className
src
alt
href
title

Answer: JSX attributes provide additional information or behavior to JSX elements.

2. What is the difference between class and className in JSX?

In normal HTML, you use:

<div class="container">Hello</div>

In JSX, you normally use:

<div className="container">Hello</div>

Example:

function App() {
  return (
    <div className="container">
      <h1>React.js</h1>
    </div>
  );
}

className is the JSX property used for assigning a CSS class.

Answer: Use className instead of class when assigning CSS classes in JSX.

3. How do you add an id attribute in JSX?

You can add an id to a JSX element just like an HTML element.

Example:

function App() {
  return (
    <div id="main-container">
      <h1>My Website</h1>
    </div>
  );
}

Here:

id="main-container"

identifies the element.

You can also use the id with CSS:

#main-container {
  padding: 20px;
}

Answer: Use the id attribute to give a JSX element a unique identifier.

4. How do you add an image using JSX attributes?

The <img> element uses attributes such as src and alt.

Example:

function App() {
  return (
    <img
      src="/logo.png"
      alt="Company Logo"
    />
  );
}

Here:

  • src specifies the image location.
  • alt provides alternative text.

The JSX image element is self-closing:

<img src="/logo.png" alt="Company Logo" />

Answer: Use attributes such as src and alt to display an image in JSX.

5. How do you add a link using JSX attributes?

The <a> element uses the href attribute to specify the destination.

Example:

function App() {
  return (
    <a href="https://example.com">
      Visit Website
    </a>
  );
}

The href attribute contains the URL.

You can also use a JavaScript variable:

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

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

Notice that the variable is written inside {}.

Answer: Use the href attribute to specify the destination of a link.

6. How do you use a JavaScript variable as a JSX attribute?

You can use curly braces {} to provide a JavaScript value to an attribute.

Example:

function App() {
  const imageUrl = "/logo.png";

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

export default App;

Here:

src={imageUrl}

uses the value of the JavaScript variable as the src attribute.

Another example:

const userName = "Aman";

<h1 title={userName}>Hello</h1>

Answer: Use {} when an attribute value needs to come from a JavaScript variable or expression.

7. How do you add multiple JSX attributes to an element?

You can add multiple attributes by separating them with spaces.

Example:

function App() {
  return (
    <input
      id="username"
      className="input-box"
      type="text"
      placeholder="Enter your name"
    />
  );
}

This element contains four attributes:

id
className
type
placeholder

Each attribute provides different information about the input.

Answer: Multiple JSX attributes can be added to the same element, separated by spaces.

8. What are boolean attributes in JSX?

Some JSX attributes represent a true or false value. These are called boolean attributes.

For example:

function App() {
  return (
    <input
      type="text"
      disabled
    />
  );
}

Here, disabled means the input is disabled.

You can also use a JavaScript value:

function App() {
  const isDisabled = true;

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

If:

const isDisabled = false;

the button will not be disabled.

Answer: Boolean attributes represent true or false values, such as disabled, checked, and required.

9. How do you dynamically set a JSX attribute?

A JSX attribute can receive a value from a variable or expression.

Example:

function App() {
  const buttonText = "Submit";
  const buttonClass = "primary-button";

  return (
    <button className={buttonClass}>
      {buttonText}
    </button>
  );
}

export default App;

Here:

className={buttonClass}

sets the CSS class dynamically.

You can also use expressions:

function App() {
  const isActive = true;

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

If isActive is true, the class will be:

active

Otherwise:

inactive

Answer: Dynamic JSX attributes can use JavaScript variables and expressions inside {}.

10. Create a React component using multiple JSX attributes

Let’s create a simple profile card using several JSX attributes.

function ProfileCard() {
  const name = "Riya";
  const imageUrl = "/profile.png";
  const profileLink = "https://example.com/profile";

  return (
    <div
      id="profile-card"
      className="card"
    >
      <img
        src={imageUrl}
        alt={`${name}'s profile`}
        className="profile-image"
      />

      <h2 title={name}>
        {name}
      </h2>

      <a
        href={profileLink}
        target="_blank"
        rel="noreferrer"
      >
        View Profile
      </a>
    </div>
  );
}

export default ProfileCard;

This example uses several JSX attributes:

id
className
src
alt
title
href
target
rel

It also uses JavaScript expressions:

src={imageUrl}


title={name}

and:

alt={`${name}'s profile`}

This is a practical example of how JSX attributes can make components dynamic and reusable.

Answer: JSX attributes allow you to control the properties, appearance, links, and behavior of React elements using both fixed and dynamic values.

Key Takeaways

  • JSX attributes provide additional information to React elements.
  • JSX uses className instead of the HTML class attribute.
  • The id attribute can identify a specific JSX element.
  • src and alt are commonly used with images.
  • href is used to specify the destination of a link.
  • JavaScript variables can be used as attribute values with {}.
  • Multiple attributes can be added to the same JSX element.
  • Boolean attributes can represent true or false values.
  • JSX attributes can contain dynamic JavaScript expressions.
  • Understanding attributes is important for creating dynamic React components.

FAQs

1. What are JSX attributes?

JSX attributes provide additional information, properties, or behavior to JSX elements.

2. Why is className used instead of class in JSX?

React uses className as the property for specifying a CSS class on a JSX element.

Example:

<div className="container">
  Hello
</div>

3. How do I use a JavaScript variable as an attribute?

Place the variable inside curly braces.

const image = "/logo.png";

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

4. What is the purpose of the alt attribute?

The alt attribute provides alternative text for an image. It is useful for accessibility and when the image cannot be displayed.

5. What is the href attribute in JSX?

The href attribute specifies the destination URL of an anchor element.

<a href="https://example.com">Visit</a>

6. What are boolean attributes in JSX?

Boolean attributes represent true or false states.

Examples include:

disabled
checked
required

7. Can JSX attributes contain JavaScript expressions?

Yes. JavaScript expressions can be placed inside {}.

Example:

<button className={isActive ? "active" : "inactive"}>
  Profile
</button>

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top