React add custom attribute to the component

In this article, we will see how to add the custom attribute to the element.

What is a custom attribute in React?

A custom attribute in React is an HTML attribute that isn’t already built into the library. Custom attributes are often used to give a component extra data or functionality that React’s built-in attributes don’t provide.

How to add custom attribute to React element?

Just like any other HTML attribute, the syntax attributeName=”attributeValue” adds the custom component to the react element.

Following is the example on how to add custom component to the react element.

import React from 'react';

function CustomAttributeComponent() {
  return (
    <div customAttribute="customValue">
      This is a component with a custom attribute.
    </div>
  );
}

export default CustomAttributeComponent;

In the above example, we have created a simple React component that includes a custom attribute called “customAttribute“. We have set the value of the attribute to “customValue“.

How to pass custom values dynamically to the customAttribute using props?

Before we look into this example, first we need to understand the react props. React props are used to pass data between components. Props are essentially an object containing key-value pairs. The values can be of any type, including strings, numbers, objects, or functions.

Following is the example of adding dynamic value to the attribute

import React from 'react';

function CustomComponent(props) {
  return (
    <div custom-attribute={props.customAttributeValue}>
      {props.children}
    </div>
  );
}

export default CustomComponent;

In the above example,

In this example, we have defined a simple functional component called CustomComponent and a custom attribute called custom-attribute to the div element. The value of the attribute is obtained from the props object using the props.customAttributeValue expression.

We have also included the props.children expression, which renders any child elements passed to the component.

How to add custom attributes dynamically?

There are some cases, where we need to add custom attributes to the components dynamically based on the user input.

For example, we have a form that allows users to add items to a shopping cart. Each item may have unique attributes, such as size, color, or price. Adding custom attributes dynamically to the React components can help to manage and process these attributes effectively.

Consider, The form includes a text input field for the item name and a select field for the item size. However, some items may have additional attributes, such as a color or a price.

To handle these additional attributes, we can add custom attributes to the component dynamically based on the item selected. If the user selects an item with a color attribute, we can dynamically add a custom data-color attribute to the component. Similarly, if the user selects an item with a price attribute, you can dynamically add a custom data-price attribute to the component.

Following is the example on how to add the custom attributes to the components dynamically.

import React, { useState } from 'react';

function ShoppingCart() {
  const [item, setItem] = useState('');
  const [size, setSize] = useState('');
  const [customAttribute, setCustomAttribute] = useState('');

  function handleItemChange(e) {
    setItem(e.target.value);
    // Check if item has a custom attribute
    if (e.target.dataset.customAttribute) {
      setCustomAttribute(e.target.dataset.customAttribute);
    } else {
      setCustomAttribute('');
    }
  }

  function handleSizeChange(e) {
    setSize(e.target.value);
  }

  return (
    <form>
      <label htmlFor="item">Item:</label>
      <input type="text" id="item" value={item} onChange={handleItemChange} />

      <label htmlFor="size">Size:</label>
      <select id="size" value={size} onChange={handleSizeChange}>
        <option value="">Select a size</option>
        <option value="small">Small</option>
        <option value="medium">Medium</option>
        <option value="large">Large</option>
      </select>

      {customAttribute && <p>Custom attribute: {customAttribute}</p>}
    </form>
  );
}

export default ShoppingCart;

In the above example, When the user enters an item in the text input field, we check if the item has a custom attribute using the dataset.customAttribute property. If the item has a custom attribute, we set the customAttribute state to the value of the attribute. Otherwise, we set it to an empty string.

By adding custom attributes dynamically, we can create more flexible and customizable components that can handle a variety of user input scenarios.