title: Using React with Bootstrap Toggle
body: <p>I want to use <a href="http://www.bootstraptoggle.com/" rel="noreferrer">bootstrap toggle</a> inside a <a href="https://facebook.github.io/react/index.html" rel="noreferrer">React</a> component. However a regular checkbox is shown instead of a styled element. How that could be fixed?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;!-- Bootstrap core CSS --&gt; &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;script src="https://fb.me/react-0.13.1.js"&gt;&lt;/script&gt;
      &lt;script src="https://fb.me/JSXTransformer-0.13.1.js"&gt;&lt;/script&gt;
      &lt;script type="text/jsx"&gt;
          var WordCheckBox = React.createClass({
              render: function() {
                  return (
                      &lt;div className="checkbox"&gt;
                          &lt;label&gt;
                              &lt;input type="checkbox" data-toggle="toggle" data-on="On" data-off="Off" /&gt;
                              option1
                          &lt;/label&gt;
                      &lt;/div&gt;
                      );
              }
          });
          React.render(
              &lt;WordCheckBox /&gt;,
              document.getElementById('content')
          );
      &lt;/script&gt;
  
      &lt;link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet"&gt;
      &lt;script src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;!--doesn't work. checkbox instead of toogle shown--&gt;
      &lt;div id="content"&gt; &lt;/div&gt;
      &lt;!--works--&gt;
      &lt;div class="checkbox"&gt;
          &lt;label&gt;
              &lt;input type="checkbox" data-toggle="toggle" data-on="On" data-off="Off"&gt;
              &lt;span&gt;option2&lt;/span&gt;
          &lt;/label&gt;
      &lt;/div&gt;
  
      &lt;!--works--&gt;
      &lt;div class="checkbox" data-reactid=".0"&gt;
          &lt;label data-reactid=".0.0"&gt;
              &lt;input type="checkbox" data-toggle="toggle"
                     data-on="On" data-off="Off"
                     data-reactid=".0.0.0"&gt;
              &lt;span data-reactid=".0.0.1"&gt;option3&lt;/span&gt;
          &lt;/label&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>