What Is JSX?: <Short description of your suggestion>

[ofgaard]

Checks

• [X] This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• [X] I have thoroughly read and understand The Odin Project Contributing Guide
• [ ] Would you like to work on this issue?

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

[theCodeCrusaderX]

please assign this issue to me

[JoshDevHub]

Thank you for making this issue @ofgaard

Can someone from the @TheOdinProject/react team take a look at this?

[MaoShizhong]

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.