JSX gotchas

multi-word HTML Attribute are camelCase

autoplay -\> autoPlay
 allowfullscreen ―\> allowFullscreen
 maxlength ―\> maxLength
 readonly ―\> readOnly

Boolean attribute values must be placed inside { }

<input disabled={false} /\> 
<input readOnly={!isEditable} /\>

Default value for attribute = {true} omitted boolean attribute defaults to {true}

<input required /\>

equivalent to...

<input required={true} /\>

style [<span data-tooltip-id="preview__LixwWqzAgGhvsej3P">HTML Attribute</span>](html-attribute) is [<span data-tooltip-id="preview__gfoaDXrJa2a2qzjzp">Object</span>](object) in {{...}}

cannot omit closing self-tags (unlike highly fault-tolerant HTML)

no need to escape HTML Entity!

[<span data-tooltip-id="preview__AFA7phR8QdbJCn9aS">JSX</span>](jsx) reserved word alternatives

dangerouslySetInnerHTML

special property to inject inner HTML into JSX element

[<span data-tooltip-id="preview__AFA7phR8QdbJCn9aS">JSX</span>](jsx) String [<span data-tooltip-id="preview__NkNhb3mZxJDkvtNo8">Coercion</span>](coercion) quirks

whitespace collapse between elements - newline & tab ignored! !avoid newlines between elements - insert whitespace as string expression {" "}

<h1\>
  Add
  {" "}
  <em\>Whitespace</em\>
  {" "}
  Between Elements
{/h1\>

use JSX custom data attributes to pass data using DOM nodes

use JSX custom data attributes to pass variables to third party com

References