Rendering ReactJS with CSS

Question

I'm brand new to React and am for some reason having trouble getting it to properly render a piece of CSS.

I have a react class, App that should display a Card that has on it a progress tracker.

var App = React.createClass({
render: function () {
    var pushNotifications = _.map(this.props.pushNotifications, function(value, key, notification) {
        return (
            <div className="row" key={1}>
                <div className="col-sm-12">
                    <Card>
                        <h1>Title</h1>
                        <div className="clearfix">
                            <ol class="progtrckr" data-progtrckr-steps="5">
                                <li class="progtrckr-done">Order Processing</li>
                                <li class="progtrckr-done">Pre-Production</li>
                                <li class="progtrckr-done">In Production</li>
                                <li class="progtrckr-done">Shipped</li>
                                <li class="progtrckr-todo">Delivered</li>
                            </ol>
                            <div className="pull-right">
                                <p>Total: {iOSTotal}</p>
                            </div>
                        </div>
                     </Card>

Card is defined as:

 module.exports = React.createClass({
    render: function() {
        return (
            <div className="card">
                {this.props.children}
            </div>

        )
    }
});

And the proctrckr CSS is in the css/build file as:

    ol.progtrckr {
  display: table;
  list-style-type: none;
  margin: 0;
  padding: 0;
  table-layout: fixed;
  width: 100%; }

ol.progtrckr li {
  display: table-cell;
  text-align: center;
  line-height: 3em; }

ol.progtrckr li.progtrckr-done {
  color: black;
  border-bottom: 4px solid yellowgreen; }

ol.progtrckr li.progtrckr-todo {
  color: silver;
  border-bottom: 4px solid silver; }

ol.progtrckr li:after {
  content: "\00a0\00a0"; }

ol.progtrckr li:before {
  position: relative;
  bottom: -2.5em;
  float: left;
  left: 50%;
  line-height: 1em; }

ol.progtrckr li.progtrckr-done:before {
  content: "\2713";
  color: white;
  background-color: yellowgreen;
  height: 1.2em;
  width: 1.2em;
  line-height: 1.2em;
  border: none;
  border-radius: 1.2em; }

ol.progtrckr li.progtrckr-todo:before {
  content: "\039F";
  color: silver;
  background-color: white;
  font-size: 1.5em;
  bottom: -1.6em; }

But, for some reason, it just appears as a regular ordered list, without any of the CSS I put in.

Any and all help would be appreciated.

Thanks,

If you open the console, you should see an error noting you cannot use class — lux
– lux, Commented Jul 8, 2016 at 19:10

Yury Tarabanko · Accepted Answer · 2016-07-08 18:44:10Z

4

Replace class with className. Common jsx gotcha. Docs.

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.

<ol className="progtrckr" data-progtrckr-steps="5">
  <li className="progtrckr-done">Order Processing</li>
  <li className="progtrckr-done">Pre-Production</li>
  <li className="progtrckr-done">In Production</li>
  <li className="progtrckr-done">Shipped</li>
  <li className="progtrckr-todo">Delivered</li>
</ol>

answered Jul 8, 2016 at 18:44

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

Collectives™ on Stack Overflow

Rendering ReactJS with CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related