JSX Attributes

JSX (JavaScript XML) is an extension of JavaScript that allows you to write HTML directly within React. When using JSX, attributes are similar to HTML attributes but follow different conventions, particularly in their naming and usage.

Understanding JSX Attributes

JSX attributes are used to pass information to elements and components, similar to how HTML attributes work. However, there are some differences in how these attributes are written and used in JSX:

• JSX attributes are written in camelCase rather than lowercase.
• They can accept JavaScript expressions enclosed in curly braces {}.
• You can create your own JSX attribute to pass data from parent component to child component.

Example

Here’s an example of using JSX attributes in a React component:

return (
  <>
    <h2 contentEditable="true">React App</h2>
  </>
);

In this example:

• The contentEditable attribute is used, which is similar to the contenteditable attribute in HTML but written in camelCase as contentEditable.

Commonly Used JSX Attributes

Here are some common JSX attributes and their HTML counterparts:

• className instead of class
• htmlFor instead of for
• onClick instead of onclick
• tabIndex instead of tabindex
• readOnly instead of readonly

Example with Multiple Attributes

Let's see an example that uses several JSX attributes:

return (
  <>
    <button className="btn-primary" onClick={handleClick} disabled={isDisabled}>
      Click Me
    </button>
    <label htmlFor="username">Username:</label>
    <input id="username" type="text" readOnly={true} tabIndex="1" />
  </>
);

In this example:

• The button element uses className, onClick, and disabled attributes.
• The label element uses the htmlFor attribute.
• The input element uses the id, type, readOnly, and tabIndex attributes.

Best Practices

• Consistency: Always use camelCase for attribute names in JSX.
• Boolean Attributes: For boolean attributes, you can simply provide the attribute name (e.g., disabled, checked, readOnly) if the value is true. Use curly braces for dynamic boolean values (e.g., disabled={isDisabled}).

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