Reactjs Invalid DOM property error on SVG elements

Question

I am working on code refactoring on a React project. It has components like this

import * as React from "react";

function SvgPage(props) {
  return (
    <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg> );
}



export default SvgPage;

These SVG files render without any issue but in the console, it gives me the error

Warning: Invalid DOM property stroke-width. Did you mean strokeWidth?

How do I get rid of these console warnings? I search google and find SVGR library. But I am not sure how to use it to fix the problem.

any help!

Thanks in advance! =)

Answer 1

From the docs,

Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.

For example, class becomes className in JSX, and tabindex becomes tabIndex.

Replace hyphenated prop names with their camelCase versions.

<circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />