CODEWITHSUNDEEP
javascriptreactjsdomwebpack
margherita pizza
margherita pizza

Reputation: 7145

Reactjs Invalid DOM property error on SVG elements

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! =)

Upvotes: 7

Views: 10617

Answers (2)

priyankara
priyankara

Reputation: 21

I think this is your error

so you have to change attributes inside the svg tag to use camel case, like stroke-width="4" as strokeWidth="4" and stroke-linecap="" as strokeLinecap=""

Upvotes: 2

Arun Kumar Mohan
Arun Kumar Mohan

Reputation: 11915

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" />

Upvotes: 10

Related Questions