title: React add a variable name attribute
body: <p>What is the cleanest way in React to add a variable name attribute?
  The end result I want is: <code>&lt;div data-flag&gt;Hello&lt;/div&gt;</code> where the name <code>data-flag</code> is stored in a <code>const</code> variable.</p>
  
  <hr>
  
  <p>The ways I found now are:</p>
  
  <pre class="lang-js prettyprint-override"><code>const DATA_FLAG = 'data-flag';
  
  const Hello = ({ name }) =&gt; {
      const dataAttrs = { [DATA_FLAG]: true }
      return &lt;div {...dataAttrs}&gt;Hello {name}&lt;/div&gt;;
  }
  </code></pre>
  
  <p>Or this one-line version (but I find it less readable):</p>
  
  <pre class="lang-js prettyprint-override"><code>const Hello = ({ name }) =&gt; &lt;div {...{ [DATA_FLAG]: true }}&gt;Hello {name}&lt;/div&gt;;
  </code></pre>
  
  <p>You can play with it in <a href="https://jsfiddle.net/mpqb87vy/" rel="nofollow noreferrer">this JSFiddle</a></p>
  
  <hr>
  
  <p>These versions work fine if the attribute was variable (true or false) but in my case it's always <code>true</code> so I find it a bit over-killed and the syntax complex.</p>
  
  <p>I would love to know if there is a cleaner way to achieve it.</p>
  
  <p>I know that the best approach is to apply it directly like: <code>&lt;div data-flag&gt;Hello&lt;/div&gt;</code> but I really need to store <code>data-flag</code> in a constant (as shared by other components).</p>