React.js Template Not Rendering Properly

Question

I'm working on the React.js tutorial here: https://facebook.github.io/react/docs/tutorial.html

I have everything working as expected, but for some reason, when I apply additional HTML to my form with classes, the styling doesn't apply. I have checked out a bit of additional documentation, but can't find a reason why the additional HTML won't render.

The form elements will render, but nothing with the 'large-XX columns' classes will render.

Any thoughts?

var CommentForm = React.createClass({
 handleSubmit: function(e) {
    e.preventDefault();
    var creator = this.refs.creator.value.trim();
    var mr = this.refs.mr.value.trim();
    var message = this.refs.message.value.trim();
    var csrfmiddlewaretoken = this.refs.csrfmiddlewaretoken.value.trim();
    if (!creator || !mr || !message || !csrfmiddlewaretoken ) {
        return;
    }
    this.props.onCommentSubmit({creator:creator, mr:mr, message:message, csrfmiddlewaretoken: csrfmiddlewaretoken})
    this.refs.creator.value = '';
    this.refs.mr.value = '';
    this.refs.message.value = '';
    return;
},

render: function() {
return (
  <form className="commentForm" onSubmit={this.handleSubmit}>
    <div class="row">
        <div class="large-10 columns">
            <input type="hidden" ref="csrfmiddlewaretoken" value="{{ csrf_token }}" />
            <input type="hidden" ref="creator" value="{{ globalEmployee.id }}" />
            <input type="hidden" ref="mr" value="{{ mr.id }}" />
            <input type="text" ref="message" placeholder="Add a comment..." />
        </div>
        <div class="large-12 columns">
        </div>
        <div class="large-2 columns">
            <input type="submit" value="Post" class="button tiny expand" />
        </div>
    </div>
  </form>
);
 }
});

dreyescat · Accepted Answer · 2015-10-22 21:47:39Z

2

Instead of class use className as you did in the form element.

From HTML Tags vs. React Components:

Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.

answered Oct 22, 2015 at 21:47

dreyescat

13.9k5 gold badges52 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Craig Over a year ago

That's it. Thanks for the help.

Collectives™ on Stack Overflow

React.js Template Not Rendering Properly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related