title: How do I keep react from stripping a-frame attributes?
body: <p>I have a short example of an a-frame page (without React) that uses the raycaster and cursor components. The HTML looks like this:</p>
  <pre><code>          &lt;a-scene&gt;
              &lt;a-entity raycaster=&quot;objects: .clickable&quot; cursor=&quot;rayOrigin: mouse&quot;&gt;&lt;/a-entity&gt; 
              &lt;a-plane class=&quot;clickable&quot; color=&quot;yellow&quot; position=&quot;0 1.5 -3&quot; onclick=&quot;handleClick()&quot;&gt;&lt;/a-plane&gt;        
              &lt;a-sky color=&quot;blue&quot;&gt;&lt;/a-sky&gt;
            &lt;/a-scene&gt;`
  </code></pre>
  <p>When I render this HTML and view the DOM, I can see the raycaster and cursor attributes along with their data. According to the latest react docs, starting with React v16, unknown attributes on HTML elements should get passed through JSX. However, the attributes get stripped with the same HTML outputted through React, like this:</p>
  <pre><code>      ReactDOM.render(
            &lt;a-scene&gt;
              &lt;a-entity raycaster=&quot;objects: .clickable&quot; cursor=&quot;rayOrigin: mouse&quot;&gt;&lt;/a-entity&gt; 
              &lt;a-plane class=&quot;clickable&quot; color=&quot;yellow&quot; position=&quot;0 1.5 -3&quot; onclick=&quot;handleClick()&quot;&gt;&lt;/a-plane&gt;        
              &lt;a-sky color=&quot;blue&quot;&gt;&lt;/a-sky&gt;
            &lt;/a-scene&gt;,
          document.getElementById('root')
        );
  </code></pre>
  <p>If I inspect the DOM when this second react example is running, it looks like:<code>&lt;a-entity raycaster cursor&gt;&lt;/a-entity&gt;</code></p>
  <p>If I add &quot;data-&quot; to the front of the attribute name, it passes the data, but then it has the wrong name and a-frame doesn't see it. What am I doing wrong here?</p>