Describe the bug
React/JSX requires SVG attributes to be written in camelCase. However, in the TransactionCard component, fill-rule and clip-rule are used in kebab-case, causing React to throw warnings in the browser console.
To Reproduce
Steps to reproduce the behavior:
1-Open the TransactionCard component.
2-Include an SVG element with fill-rule and clip-rule attributes.
3-Run the application.
4-Open the browser console and observe the following warnings:
Warning: Invalid DOM property 'fill-rule'. Did you mean 'fillRule'?
Warning: Invalid DOM property 'clip-rule'. Did you mean 'clipRule'?
Expected behavior
The SVG attributes should adhere to React/JSX standards. The attributes fill-rule and clip-rule must be replaced with fillRule and clipRule to remove the warnings and ensure compliance with JSX.
Screenshots
The browser console showing the warnings:
**Environment **
Browser or Node.js: Browser
Browser: Chrome
Browser Version: 114
Node Version: 18.15.0
Additional context
This issue can be resolved by updating the fill-rule and clip-rule attributes to fillRule and clipRule in the TransactionCard component. The fix will ensure that the application adheres to React/JSX standards and removes unnecessary warnings from the browser console.
Describe the bug
React/JSX requires SVG attributes to be written in camelCase. However, in the TransactionCard component, fill-rule and clip-rule are used in kebab-case, causing React to throw warnings in the browser console.
To Reproduce
Steps to reproduce the behavior:
1-Open the TransactionCard component.
2-Include an SVG element with fill-rule and clip-rule attributes.
3-Run the application.
4-Open the browser console and observe the following warnings:
Warning: Invalid DOM property 'fill-rule'. Did you mean 'fillRule'?
Warning: Invalid DOM property 'clip-rule'. Did you mean 'clipRule'?
Expected behavior
The SVG attributes should adhere to React/JSX standards. The attributes fill-rule and clip-rule must be replaced with fillRule and clipRule to remove the warnings and ensure compliance with JSX.
Screenshots
The browser console showing the warnings:
**Environment **
Browser or Node.js: Browser
Browser: Chrome
Browser Version: 114
Node Version: 18.15.0
Additional context
This issue can be resolved by updating the fill-rule and clip-rule attributes to fillRule and clipRule in the TransactionCard component. The fix will ensure that the application adheres to React/JSX standards and removes unnecessary warnings from the browser console.