React Component Style Choice

// choose an attribute style
const AwesomeComponent = ({ onAwesomeHappening }) => (
  <div className={`${styles.awesomeHolder}`}>       
    <span 
      data-mode="awesome-mode"
      data-tagging="awesome-btn-click"
      className={`${styles.awesomeBtn}`}
      onClick={ () => onAwesomeHappening('Awesome!') }>
      Save
    </span>
  </div>
);

// or
const AwesomeComponent = ({ onAwesomeHappening }) => (
  <div className={`${styles.awesomeHolder}`}>       
    <span data-mode="awesome-mode" data-tagging="awesome-btn-click" className={`${styles.awesomeBtn}`} onClick={ () => onAwesomeHappening('Awesome!') }>
      Save
    </span>
  </div>
);




























// HTML?
<header class="accordionHeader" data-tagged="true" data-tag="WT.z_pinteract" data-tag-value="Key Information">
  <h3 class="sectionTitle">Key Information</h3>
  <a class="expand"></a>
</header>

// or
<header 
  class="accordionHeader" 
  data-tagged="true" 
  data-tag="WT.z_pinteract" 
  data-tag-value="Key Information">
    <h3 class="sectionTitle">Key Information</h3>
    <a class="expand"></a>
</header>