How Do I Get Rid Of React Error Warnings Telling Me To Change Svg Attributes To Camel Case?

Recently my team upgraded from React 15.1 to 15.3. With this upgrade comes these errors: warning.js:36 Warning: Unknown DOM property stroke-width. Did you mean strokeWidth? in

Solution 1:

If you're using WebPack, you can use the babel plugin react-html-attrs here:

https://github.com/insin/babel-plugin-react-html-attrs

From the author's readme, the plugin does the following:

Transforms JSX class attributes into className and for attributes into htmlFor, allowing you to copy and paste HTML into your React components without having to manually edit these particular attributes each time.

In this pull request, which claims to solve your issue, the author has added several other attributes for the plugin to translate, including SVG attributes:

https://github.com/insin/babel-plugin-react-html-attrs/pull/5