title: React pass data attribute to DOM
body: <p>I'm extending a component and want to add extra attributes to it. To add a new class attribute I'm using:</p>
  
  <pre><code>extraProps.className = 'some-value';
  </code></pre>
  
  <p>or an ID...</p>
  
  <pre><code>extraProps.ID = 'some-value';
  </code></pre>
  
  <p>but how can I add a data attribute? e.g. <code>data-my-attribute</code></p>
  
  <p>I tried camelCase convention:</p>
  
  <pre><code>extraProps.dataMyAttribute = 'some-value';
  </code></pre>
  
  <p>...but it doesn't add dashes in the outputted HTML. It outputs <code>dataMyAttribute='some-value'</code></p>
  
  <p>Full code:</p>
  
  <pre><code>function addMyProp( extraProps, props ) {
  
      extraProps.dataSomeAttribute = 'something' // it doesn't add the data- prefix
  
      return extraProps;
  }
  </code></pre>