when i'm use JSX and bootstrap (menu etc), js from bootstrap dont apply

[eduscrakozabrus]

Help us help you! Please choose one:

• [ ] My app crashes with react-rails, so I've included the stack trace and the exact steps which make it crash.
• [ ] My app doesn't crash, but I'm getting unexpected behavior. So, I've described the unexpected behavior and suggested a new behavior.
• [Х ] I'm trying to use react-rails with another library, but I'm having trouble. I've described my JavaScript management setup (eg, Sprockets, Webpack...), how I'm trying to use this other library, and why it's not working.
• [] I have another issue to discuss.

---

when i'm use JSX and bootstrap (menu etc), js from bootstrap dont apply (Describe your issue here)

[rmosolgo]

Hi, could you share some details about your situation? for example:

• React component code snippet
• Screenshot of rendered components
• Description of the expected behavior

Thanks!

[eduscrakozabrus]

home.js.jsx

var Home = React.createClass({
  propTypes: {
    data: React.PropTypes.string
  },

  render: function() {
    return (
      <div>
        <div>Name of portal: {this.props.data}</div>
          <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
  </div>
      </div>
    );
  }
});

/view/home/index.html.erb

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

<%= react_component( 'Home', {data: 'Корпоративный портал'}) %>

gem file

gem 'react-rails'

gem 'therubyracer'
gem 'less-rails' # Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem 'twitter-bootstrap-rails'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '>= 5.0.0.rc1', '< 5.1'
# Use sqlite3 as the database for Active Record

application.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require_tree .

[eduscrakozabrus]

and result :( ....

[rmosolgo]

Use className in JSX, don't use class! (https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components) Does that fix it?

(I see that bootstrap's CSS is loaded because the font is Helvetica.)

[eduscrakozabrus]

Yes. This is in className my error, Snx!

[rmosolgo]

Cool, glad we found it!