JSX Attributes

Attributes provide additional information about an element.

<img src="photo.jpg" alt="Student" />

Here, src and alt are attributes.

Many JSX attributes look familiar to HTML developers.

<input
    type="text"
    placeholder="Enter your name"
/>

The syntax is similar to HTML, but JSX has additional rules.

String values can be written inside quotation marks.

<h1 className="title">
    React Tutorial
</h1>

The value "title" is a string.

In JSX, use className instead of the HTML class attribute.

<div className="container">
    <h1>Welcome</h1>
</div>

For a label element, JSX uses htmlFor instead of for.

<label htmlFor="email">
    Email
</label>

<input id="email" type="email" />

JavaScript variables can be used as attribute values with curly braces.

const imageUrl = "photo.jpg";

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

const title = "React Course";

return (
    <h1 title={title}>
        Learn React
    </h1>
);

The value of the title variable is assigned to the attribute.

The src attribute specifies the source of an image or other resource.

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

The alt attribute provides alternative text for an image.

<img
    src="student.jpg"
    alt="Student Photo"
/>

Meaningful alternative text can improve accessibility.

The href attribute specifies the destination of a link.

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

The target attribute controls where a link is opened.

<a
    href="https://example.com"
    target="_blank"
>
    Open Website
</a>

The id attribute gives an element a unique identifier.

<div id="main-content">
    React Tutorial
</div>

The title attribute can provide additional information about an element.

<button title="Save your work">
    Save
</button>

Some JSX attributes represent boolean values.

<button disabled>
    Submit
</button>

The disabled attribute represents a true value when present.

A JavaScript boolean can be assigned to an attribute using curly braces.

const isDisabled = true;

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

The checked attribute can control the checked state of a checkbox when used appropriately with React state or props.

const selected = true;

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

The value attribute can be used with form elements.

const name = "Rahul";

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

The placeholder attribute displays a hint inside an empty input.

<input
    type="text"
    placeholder="Enter your name"
/>

React event attributes use camelCase names such as onClick.

function handleClick() {
    alert("Button clicked!");
}

return (
    <button onClick={handleClick}>
        Click Me
    </button>
);

The onChange attribute is commonly used with form controls.

function handleChange(event) {
    console.log(event.target.value);
}

return (
    <input
        type="text"
        onChange={handleChange}
    />
);

The style attribute can receive a JavaScript object.

const style = {
    color: "blue",
    fontSize: "24px"
};

return (
    <h1 style={style}>
        React
    </h1>
);

A style object can also be written directly inside JSX.

<p
    style={{
        color: "green",
        fontSize: "20px"
    }}
>
    Learn React
</p>

A JavaScript variable can dynamically determine the CSS class.

const statusClass = "active";

return (
    <div className={statusClass}>
        Active Student
    </div>
);

An element can contain multiple attributes.

<img
    src="profile.jpg"
    alt="Student"
    className="profile-image"
    title="Student Profile"
/>

JavaScript expressions can be used directly as attribute values.

const width = 200;

return (
    <img
        src="photo.jpg"
        alt="Photo"
        width={width}
    />
);

The spread syntax can be used to pass multiple properties to a JSX element.

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

return (
    <div {...props}>
        Student Information
    </div>
);

The properties inside props are passed to the element.

Custom data attributes can be written using the data- naming pattern.

<button data-id="101">
    Student
</button>

Data attributes can store custom data associated with an element.

Accessibility-related attributes can be used in JSX. Some ARIA attributes use the aria- naming pattern.

<button
    aria-label="Close menu"
>
    X
</button>

Accessibility attributes help communicate information about the UI to assistive technologies.

• Use className instead of class.
• Use htmlFor instead of for for labels.
• Use camelCase for React event attributes.
• Use curly braces for JavaScript values.
• Use meaningful alt text for images.
• Use boolean attributes correctly.
• Keep long attribute lists formatted clearly.
• Avoid unnecessary inline styles when reusable CSS is more suitable.
• Use accessibility attributes where appropriate.

function StudentCard() {

    const studentName = "Rahul";
    const imageUrl = "student.jpg";
    const isActive = true;

    function handleClick() {
        alert("Student: " + studentName);
    }

    return (
        <div
            className="student-card"
            title="Student Information"
        >

            <img
                src={imageUrl}
                alt="Student Profile"
                className="profile-image"
            />

            <h2>
                {studentName}
            </h2>

            <p className={isActive ? "active" : "inactive"}>
                {isActive ? "Active Student" : "Inactive Student"}
            </p>

            <button
                onClick={handleClick}
                disabled={!isActive}
            >
                View Profile
            </button>

        </div>
    );

}

export default StudentCard;

This example combines static attributes, dynamic attributes, expressions, className, event handling, boolean attributes, and conditional values.