CODEWITHSUNDEEP
javascripttwitter-bootstrapreactjs
TonyW
TonyW

Reputation: 18875

Bootstrap classes do not work in ReactJS component

I just started learning to use ReactJS to render views, but I found the bootstrap CSS classes don't work as expected if I insert the attributes directly into the ReactJS components. For example, in the below code, I wish to generate a panel with the classes: panel-default and panel-heading; however, the generated view doesn't carry the bootstrap style. I was wondering why and how to fix, if possible. Please note that I've compiled my ReactJS code and included the compiled JS in the HTML code (see at the bottom).

var taxonGroups = {
  identifier: 'ABC-x981',
  sources: [
    {segmentName: 'segment1', length: 1090},
    {segmentName: 'segment2', length: 98},
    {segmentName: 'segment3', length: 2091},
    {segmentName: 'segment4', length: 1076},
  ],

  fields: ['Taxon Name', 'Taxon ID', 'Taxon source'],

  collectionDate: '2001-09-10'
};

var Taxon = React.createClass({
  render: function() {
    return (
      <div class="panel panel-default"> <div class="panel-heading"><p>{this.props.data.identifier}</p></div>
        <table class="table table-bordered table-striped table-hover">
              {
                this.props.data.sources.map(function(source) {
                  return <Segment name={source.segmentName} length={source.length}/>
                })
                }
          </table>

      </div>
    );
  }
});


var Segment = React.createClass({
  render: function() {
    return <tr><td>{this.props.name}</td><td>{this.props.length}</td></tr>
  }

  });

React.render(<Taxon data={taxonGroups} />, document.getElementById('container'));

The HTML code:

<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="bower_components/react/react.js"></script>
  <script src="bower_components/react/JSXTransformer.js"></script>
  <title>reactJS 3 - Rendering data with bootstrap styles</title>
</head>
<body>
<span>Is there anything?</span>

<div id="container">

</div>

<div class="panel panel-default">
  <div class="panel-heading">This is Panel Heading!</div>
  <div class="panel-body">
    This is panel body
  </div>
</div>


<script src="scripts/ReactJS/build/taxon.js"></script>
</body>
</html>

Upvotes: 25

Views: 18337

Answers (2)

Bukunmi
Bukunmi

Reputation: 2574

I had a similar issue when following a React tutorial, i was writing

<div classname="my bootstrap code here">

instead of

<div className="my bootstrap code here">

className should be in camel case for jsx. Hope this helps :).

Upvotes: 0

FeifanZ
FeifanZ

Reputation: 16316

In React, the attribute is className, not class. So for example, rather than having 

<div class="panel panel-default">

You should instead have

<div className="panel panel-default">

By setting it as class, React ignores that attribute, and as a result the generated HTML doesn't include the classes the CSS needs.

If you run your expected HTML through the compiler, that is indeed what you get.enter image description here

Upvotes: 67

Related Questions