Open ofgaard opened 3 weeks ago
please assign this issue to me
Thank you for making this issue @ofgaard
Can someone from the @TheOdinProject/react team take a look at this?
The stroke-width
case is directly from the Writing Markup in JSX guide from the React docs.
Yes, technically such attributes will end up working but you'll still get ESLint and runtime console errors due to it being an unrecognised property for React elements. The JSX compiler will still technically compile the kebab case (I believe it didn't use to), but stroke-width
will just compile straight whereas strokeWidth
will be a React built-in component attribute so it can do stuff with it, and there may be edge cases where this does matter.
Either way, given that the rule and example is straight from React docs, for now I'd think it's better to leave things as is and not dive into "but technically" stuff that doesn't really matter much. stroke-width
will still produce error output even if it compiles in the end.
Checks
Describe your suggestion
To explain that most HTML things like attributes should be camelCase in React, this article uses an example exercise with 'stroke-width' inside an svg element and mentions that this needs to be converted to strokeWidth to work. This is not a good example, as the code still works when using 'stroke-width'. Maybe because its wrapped in an SVG element and thus different rules apply? This can cause more confusion for the student
Path
Node / JS
Lesson Url
https://www.theodinproject.com/lessons/node-path-react-new-what-is-jsx
(Optional) Discord Name
No response
(Optional) Additional Comments
No response