Search code examples
reactjsemotion

React: microdata typeScope being pased weirdly

I'm trying to set microdata to a p element contained in a parent component. When I set itemScope="" in the parent I don't get it in the p element in the dom, but if I set itemScope alone, it works as expected, although this means itemScope={true} as per React rules. ItemScope is a boolean attribute so as per HTML specs it should be empty string or canonical value when you want it to be considered true. What am I missing?

See fiddle: https://jsfiddle.net/rv9085ob/

<!-- html -->
<div id="app"></div>

// js
const SimpleComp = (props) => <p {...props}>ItemScope is [{JSON.stringify(props.itemScope)}]</p>;

const fragment = <div>
<SimpleComp itemScope="" />
<SimpleComp itemScope />
<SimpleComp itemScope={true} />
</div>;

ReactDOM.render(fragment, document.querySelector("#app"))

Results in:

<div>
  <p>ItemScope is [""]</p>
  <p itemscope="">ItemScope is [true]</p>
  <p itemscope="">ItemScope is [true]</p>
</div>
Solution

  • Please refer to this issue in the React Github repository. https://github.com/facebook/react/issues/13400

    There is a PR open for this here, it seems to be ongoing - https://github.com/facebook/react/pull/13404