title: How to use boolean attributes in React without getting warnings and without becoming verbose?
body: <p>Let's say I want to create a table component.</p>
  <p>In my <code>&lt;th&gt;</code> elements I want to let the developer specify <code>start</code> or <code>end</code> to align the text.</p>
  <p>We have these options:</p>
  <pre><code>&lt;th start=&quot;true&quot;&gt;Title&lt;/th&gt;
  </code></pre>
  <p>This works, but it's verbose.</p>
  <p>We can change it to:</p>
  <pre><code>&lt;th start&gt;Title&lt;/th&gt;
  </code></pre>
  <p>This also works, but we get this warning:</p>
  <blockquote>
  <p>Warning: Received <code>true</code> for a non-boolean attribute <code>start</code>.<br />
  If you want to write it to the DOM, pass a string instead: start=&quot;true&quot; or start={value.toString()}.</p>
  </blockquote>
  <p>But the <code>&lt;th start&gt;</code> is very elegent, clean, minimal and it's compatible with HTML's boolean attributes.</p>
  <p>How can we have a boolean attribute in react, without getting warnings and without using boilerplate code?</p>