How do I dynamically set HTML5 data- attributes using react?

Dynamically setting HTML5 tag attributes in React is achieved through JavaScript expressions. React leverages JSX to seamlessly integrate logic and markup, enabling straightforward binding of dynamic data to HTML5 tag attributes. Below, I'll demonstrate practical approaches to dynamically set HTML5 tag attributes in real-world development scenarios with specific examples.

Example 1: Dynamically Setting className

Suppose we need to adjust a div element's className based on the user's login status:

jsx
function WelcomeBanner({ isLoggedIn }) {
  const className = isLoggedIn ? 'welcome-logged-in' : 'welcome-logged-out';
  
  return <div className={className}>Welcome to our website!</div>;
}

In this example, the className value is dynamically determined based on the boolean state of isLoggedIn. If the user is authenticated, className is set to welcome-logged-in; otherwise, it defaults to welcome-logged-out.

Example 2: Dynamically Setting style

When dynamically altering an element's style based on a condition, we can directly modify the style attribute within JSX using JavaScript expressions:

jsx
function TemperatureDisplay({ temperature }) {
  const style = {
    color: temperature > 30 ? 'red' : 'blue'
  };
  
  return <div style={style}>Current temperature is {temperature}°C</div>;
}

Here, the color property of the style object dynamically adjusts based on the temperature. If the temperature exceeds 30°C, the text color becomes red; otherwise, it remains blue.

Example 3: Dynamically Adding or Removing Attributes

Sometimes, we need to conditionally add or remove attributes. For instance, include the disabled attribute only when the button is in a loading state:

jsx
function SubmitButton({ isSubmitting }) {
  return <button disabled={isSubmitting ? true : undefined}>Submit</button>;
}

Here, if isSubmitting is true, the button is disabled. Note that when the button should not be disabled, we pass undefined instead of false, as the disabled attribute is always active when present, irrespective of its value.

These represent common techniques for dynamically setting HTML5 tag attributes in React. By effectively utilizing JSX and JavaScript expressions, developers can flexibly manage element attributes to satisfy diverse dynamic requirements.