ReactJS: Invalid DOM property `stroke-Width`.

Dung Do Tien Mar 14 2022 42

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.
  • R

    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.

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close