ReactJS: Invalid DOM property `stroke-Width`.
Dung Do Tien
Mar 14 2022
85
Hello Guys, I am a newbie in ReactJs. I have created a component with the name FileText and I want to display the SVG icon And can reuse it anywhere. You can see it below:
import { IProps } from '../types';
const FileText = ({
color = 'currentColor',
size = 24,
...otherProps
}: IProps) => {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...otherProps} >
<path
d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z"
stroke={color}
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M14 2V8H20"
stroke={color}
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10 9H9H8"
stroke={color}
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16 13H8"
stroke={color}
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16 17H8"
stroke={color}
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);
};
export default FileText;
But when importing it into other components and running I got an error Warning: Invalid DOM property 'stroke-Width'.
How can I fix it?
Have 1 answer(s) found.
-
R0
Raj Srivastava Mar 10 2022
Because ReactJs does not understand props when it has a "-" character. The solution for this error is change:
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"to
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"I hope it's helpful for you.
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.