Case Sensitivity

[daelliott]

Not sure where this issue belongs and couldn't find a better place to request help.

I am new to React and have been playing with tutorials. I was working with this one http://www.syncano.com/getting-started-reactjs-tutorial/ and converted it using the ReactJS.NET framework.

I have it up and running but took some work to figure out what was going on. After getting everything in the right place and configured correctly, I loaded the screen and saw that it looked completely different than the reference tutorial. Upon looking at the rendered HTML I saw that the CSS class name was completely missing from the corresponding HTML tags. As I manually started adding it in via the developer tool, I saw that the screen slowly look better. Eventually I got to the root problem.

The issue turned out to be case sensitivity. The 2 big offenders were

• classname should be className
• onclick should be onClick

I am doing server side via the HTML helpers
@Html.React("App", new {} )
@Html.ReactInitJavaScript()

As a last item. "new {}" is required for @Html.React as null would blow up.

[Daniel15]

Hey @daelliott - Do you see lowercase classname in any of the documentation or tutorials? React JSX compiles to regular JavaScript, and thus it requires className (uppercase N) to maintain consistency with the DOM. This is how it is mentioned in all the documentation.

[Daniel15]

I haven't heard back so I'm going to close this issue, but please reopen with more information if there's still something I need to fix. Thanks!

[dorward]

While that holds for className, it doesn't for onclick which must be all lower-case in DOM.

button.className = "foo bar baz";
button.onclick = function (e) { /* event handler */ };

[Daniel15]

@dorward - Might be a good question to ask in the React repo or somewhere similar, this is not specific to ReactJS.NET :)