Lowercase component names (usage) are no longer supported in JSX: <use>
I am using svg element in React JSX, assuming it is <use>
valid in JSX. Is the following error listed correctly?
Lowercase component names (usage) are no longer supported in JSX: see http://fb.me/react-jsx-lower-case when parsing the file
<svg className="icon">
<use xlink:href="#icon-call"></use>
</svg>
Using safeouslySetInnerHTML fixed it.
<svg className="icon" dangerouslySetInnerHTML={{__html:'<use xlink:href="#icon-dnd-on"></use>'}}>
</svg>
source to share
TL; DR
I think you are stuck with the help dangerouslylSetInnerHTML
.
Explanation
React only supports a subset of HTML / SVG elements and is <use />
not supported.
As of v0.12, React switches to restricting lowercase tag names to HTML / SVG elements only , but since you are running into this not for elements, it is whitelisted. FB recommends opening the issue for valid tags that they don't yet support.
You can use {React.createElement('use')}
to force React to display the tag <use />
, but it still won't let you set the attribute xlink:href
, since React doesn't support unknown DOM properties (see the open issue on the topic ). In a previous release, some suggested using this.getDOMNode().setAttribute
in componentDidMount
to set any custom attributes, but depending on your use case, this might be even more awkward than the option dangerouslySetInnerHTML
.
source to share